当前位置:首页 > 网页特效 > jQuery特效 >

多种类型自定义对话框插件jDialog

时间:2014-09-11 08:37 来源:互联网 作者:源码搜藏 收藏 推荐

  • 广告推荐
效果预览 立即下载

多种类型自定义对话框插件jDialog多种类型自定义对话框插件jDialog是一款基于jquery实现的轻量级多种类型的自定义对话框插件。jquery对话框自定义轻量级

<script>
$(function(){
$("#test1").click(function(){
var dialog = jDialog.alert('欢迎使用jDialog组件,我是alert!',{},{
showShadow: false,// 不显示对话框阴影
buttonAlign : 'center',
events : {
show : function(evt){
var dlg = evt.data.dialog;
},
close : function(evt){
var dlg = evt.data.dialog;
},
enterKey : function(evt){
alert('enter key pressed!');
},
escKey : function(evt){
alert('esc key pressed!');
evt.data.dialog.close();
}
}
 });
}) ; 
 
$("#test2").click(function(){
var dialog = jDialog.confirm('欢迎使用jDialog组件,我是confirm!',{
handler : function(button,dialog) {
alert('你点击了确定!');
dialog.close();
}
},{
handler : function(button,dialog) {
alert('你点击了取消!');
dialog.close();
}
});
});
 
$("#test3").click(function(){
// 通过options参数,控制iframe对话框
var dialog = jDialog.iframe('http://www.codesocang.com/',{
title : '代码编辑器 - 源码搜藏',
width : 1100,
height : 550
});
});
 
$("#test4").click(function(){
// 通过options参数,控制dialog
var dialog = jDialog.dialog({
title : '自定义对话框',
content : '大家好,欢迎访问源码搜藏。'
});
});
 
$("#test5").click(function(){
// 通过options参数,控制dialog
var dialog = jDialog.dialog({
title : '自定义对话框',
content : '大家好,我是jDialog.dialog!',
buttons : [
{
type : 'highlight',
text : '你好',
handler:function(button,dialog)
{
dialog.close();
}
}
]
});
});
 
$("#test6").click(function(){
var dialog = jDialog.message('大家好,欢迎访问源码搜藏',{
autoClose : 3000,    // 3s后自动关闭
padding : '30px',    // 设置内部padding
modal: true         // 非模态,即不显示遮罩层
});
});
 
$("#test7").click(function(){
var dialog = jDialog.tip('大家好,欢迎访问源码搜藏',{
target : $('#test7'),
    position : 'left-top',
    trianglePosFromStart :0,
autoClose : 1000,
offset : {
        top :-20,
left:10,
right:0,
bottom:0
    }
});
});
 
});
</script>
本站资源仅限于学习研究,严禁从事商业或者非法活动! 源码搜藏网所有源码来自互联网转载与用户上传分享,如果侵犯了您的权益请与我们联系,我们将在24小时内删除!谢谢!

jQuery特效下载排行

最新文章