炫酷JQUERY自定义对话框插件JDIALOG_JDIALOG弹出对话框和确认对话框插件

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

在项目开发中、一般会美化 alert(); 的样式、那么今天我就和大家分享一款非常炫的插件

先来看一下程序最后的效果图片吧

下面是HTMl代码

<center>
<button id="test1">alert方式调用</button>
<br/><br/>
<button id="test2">confirm方式调用</button>
<br/><br/>
<button id="test3">iframe方式调用</button>
<br/><br/>
<button id="test4">只显示内容对话框</button>
<br/><br/>
<button id="test5">对话框配置按钮</button>
<br/><br/>
<button id="test6">message方式调用</button>
<br/><br/>
<button id="test7">tip方式调用</button>
</center>

以下是JS代码

$("#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://dwtedx.com/´,{
title : ´代码编辑器 - dwtedx个人博客´,
width : 1100,
height : 550
});
});$("#test4").click(function(){
// 通过options参数，控制dialog
var dialog = jDialog.dialog({
title : ´自定义对话框´,
content : ´大家好，欢迎访问dwtedx个人博客。´
});
});$("#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(´大家好，欢迎访问dwtedx个人博客´,{
autoClose : 3000,    // 3s后自动关闭
padding : ´30px´,    // 设置内部padding
modal: true         // 非模态，即不显示遮罩层
});
});$("#test7").click(function(){
var dialog = jDialog.tip(´大家好，欢迎访问dwtedx个人博客´,{
target : $(´#test7´),
position : ´left-top´,
trianglePosFromStart :0,
autoClose : 1000,
offset : {
top :-20,
left:10,
right:0,
bottom:0
}
});
});