炫酷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 

转载于:https://www.cnblogs.com/jxldjsn/p/5539005.html