直接代码：
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Dialog - Default functionality</title> <link rel="stylesheet" href="../jquery.ui.all.css" /> <link rel="stylesheet" href="../images" /> <link rel="stylesheet" href="../demos.css" /> <script type="text/javascript" src="http://www.cnblogs.com/jquery/jquery.1.8.3.js"></script> <script type="text/javascript" src="http://www.cnblogs.com/jquery/jquery.ui.1.9.2.js"></script> <script src="../external/jquery.bgiframe-2.1.2.js"></script> <script> $.fx.speeds._default = 1000; $(function() { $("#dialog").dialog({ //属性 autoOpen: true, //是否自动打开 modal: true, //背部的显示方式 closeOnEscape: true,//是否可以用esc键关闭弹出层 stack: true, //是否可覆盖其它对话框。 //dialogClass:"alert", resizable: true, //resizable是否可以改变dialog的大小，默认为true，可以改变大小。 draggable: true, //draggable是否可以使用标题头进行拖动，默认为true，可以拖动; show: "slide", //show: "blind", //显示的方式 hide: "explode", //隐藏的方式 maxHeight: false, //最大最小高度宽度 maxWidth: false, minHeight: 150, minWidth: 150, height: "auto", //初始的高与宽,表示长度，不是坐标 800, title: "内部设定的标题", //重新设定标题 buttons:{ //按钮设置 "OK":function(){ console.log('OK'); $(this).dialog("close"); }, "NO":function(){ console.log('NO'); $(this).dialog("close"); }, }, position: ['right','top'], zIndex: 1000, //closeText: "hide" ?? //事件 在对象中初始化或者绑定事件用bind() /* 在这里初始化不行，在初始化后绑定可以 ？？ //对话框关闭前执行，返回 false 防止对话框关闭。 beforeclose: function(event,ui) { console.log("beforeclose"); return false; }, //打开对话框时执行 open: function(event,ui) { console.log("open"); return false; }, //对话框获得焦点时执行 focus: function(event,ui) { console.log("focus"); return false; }, //dragStart开始对话框拖动时执行 drag:拖动对话框时执行 dragStop:停止拖动对话框时执行 dragStart: function(event,ui) { console.log("dragStart"); return false; }, resize:调整对话框大小时执行 resizeStart:开始调整对话框大小时执行 resizeStop:结束调整对话框大小时执行 close:关闭对话框时执行 */ //方法 //isOpen:对话框可见时返回 true }); // 初始化后绑定 //$("#dialog").dialog("option","position",["right","top"]);//绑定属性 $("#dialog").dialog("isOpen");//对话框可见时返回 true $("#dialog").dialog("moveToTop");//使对话框处于最前方 $("#dialog").dialog("disable");//禁止操作对话框 $("#dialog").dialog("enable");允许操作对话框 //var autoOpen = $("#id").dialog("option","autoOpen");//读取 //$("#id").dialog("option","autoOpen",false);//设置 $("#dialog").dialog("close");//关闭对话框 $("#dialog").dialog("open"); $("#dialog").dialog("destroy");//销毁对话框实例 //绑定事件 $("#dialog").bind("dialogbeforeclose",function(event,ui){ console.log("beforeclose"); return false; }); $("#dialog").bind("dialogopen",function(event,ui){ console.log("dialogopen"); return false; }); $("#dialog").bind("dialogfocus",function(event,ui){ console.log("dialogfocus"); return false; }); $("#dialog").bind("dialogdragStart",function(event,ui){ console.log("dialogdragStart"); return false; }); $("#opener").click(function() { $("#dialog").dialog("open"); $("#dialog").dialog("close"); //return false; }); }); </script> </head> <body> <div id="dialog" title="Basic dialog"> <p>哈哈 ，这是我的第一个dialog</p> </div> <button id="opener">Open Dialog</button> </body> </html>