本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第7章，第7.6节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
7.6 技巧：使用对话框微件引起注意
如果想使网页中的一小部分内容脱颖而出，有几种方法可以实现它。其中一个方法是用对话框的形式显示内容。jQuery UI提供了这样一个对话框组件（dialog）。代码清单7-6演示了如何从一个常见的段落元素创建对话框。
代码清单7-6 将段落元素转换为对话框
00 <!DOCTYPE html>
01
02 <html lang="en">
03 <head>
04 <title>jQuery UI Dialog</title>
05 <link type="text/css" rel="stylesheet" href=
06 "http://code.jquery.com/ui/1.8.16/themes/base/jquery-ui.css">
07 </head>
08 <body>
09
10 <p id="my-dialog">This is the text of my dialog</p>
11
12 <button>Open dialog</button>
13
14 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
15 <script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js">
16 </script>
17
18 <script>
19 // 请将下列代码移至一个外部的.js文件中
20 $(document).ready(function() {
21
22 $('button').click(function() {
23 $('#my-dialog').dialog();
24 });
25
26 });
27 </script>
28 </body>
29 </html>
第22～24行将对话框的初始化程序关联到一个按钮的点击事件处理程序，而不是在页面加载时创建。这说明，在加载文档后，对话框的内容还是一个常规的段落。对话框初始化后，该段落看上去从文档中消失了。
7.6.1 为对话框元素添加样式
对话框微件会围绕原始元素生成很多的HTML元素。因此，在下面的示例中，高亮显示的是原始元素而不是更改的部分。请注意，这是自动生成的HTML。你不需要输入此代码。这是从代码清单7-6得到的结果。
<div style="display: block; z-index: 1001; outline: 0px none;
position: absolute; height: auto; width: 300px; top: 46px;
left: 391px;"
class="ui-dialog ui-widget ui-widget-content ui-corner-all
ui-draggable ui-resizable"
tabindex="-1" role="dialog"
aria-labelledby="ui-dialog-title-my-dialog">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all
ui-helper-clearfix">
<span class="ui-dialog-title"
id="ui-dialog-title-my-dialog"> </span>
<a href="#" class="ui-dialog-titlebar-close ui-corner-all"
role="button">
<span class="ui-icon ui-icon-closethick">close</span>
</a>
</div>
<p id="my-dialog" class="ui-dialog-content ui-widget-content"
style="width: auto; min-height: 56.0333px; height: auto;"
scrolltop="0" scrollleft="0" >
This is the text of my dialog
</p>
<div class="ui-resizable-handle ui-resizable-n"></div>
<div class="ui-resizable-handle ui-resizable-e"></div>
<div class="ui-resizable-handle ui-resizable-s"></div>
<div class="ui-resizable-handle ui-resizable-w"></div>
<div class="ui-resizable-handle ui-resizable-se ui-icon
ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se"
style="z-index: 1001;"></div>
<div class="ui-resizable-handle ui-resizable-sw"
style="z-index: 1002;"></div>
<div class="ui-resizable-handle ui-resizable-ne"
style="z-index: 1003;"></div>
<div class="ui-resizable-handle ui-resizable-nw"
style="z-index: 1004;"></div>
</div>
你可能通过前面的可调整大小组件认出了这里调整大小的“把手”（ui-resizable-handle）。
7.6.2 设置对话框的选项
对话框中有很多可以设置的选项，这些选项用于改变数据，甚至改变对话框中显示的文本。表7-4为用于对话框微件的选项列举了代码示例和描述。
7.6.3 捕获对话框的事件
下面的代码段提供了示例，演示如何处理对话框微件的事件。
当一个新的对话框被初始化时进行的事件处理：
$('#my-dialog').dialog({create: function(event, ui) {
// 事件处理
}});
//或
$('#my-dialog')
.on('dialogcreate', function(event, ui) {
// 事件处理
})
.dialog();
当用户试图关闭对话框时进行的事件处理。返回false将阻止对话框关闭：
$('#my-dialog').dialog({beforeClose: function(event, ui) {
// 事件处理
}});
//或
$('#my-dialog').dialog()
.on('dialogbeforeclose', function(event, ui) {
// 事件处理
});
当对话框打开时进行的事件处理：
$('#my-dialog').dialog({open: function(event, ui) {
// 事件处理
}});
//或
$('#my-dialog').dialog()
.on('dialogopen', function(event, ui) {
// 事件处理
});
当对话框获得焦点时处理事件：
$('#my-dialog').dialog({focus: function(event, ui) {
// 事件处理
}});
//或
$('#my-dialog').dialog()
.on('dialogfocus', function(event, ui) {
// 事件处理
});
当用户开始拖拽对话框时处理事件：
$('#my-dialog').dialog({dragStart: function(event, ui) {
// 事件处理
}});
//或
$('#my-dialog').dialog()
.on('dialogdragstart', function(event, ui) {
// 事件处理
});
当用户进一步拖拽对话框时进行的事件处理：
$('#my-dialog').dialog({drag: function(event, ui) {
// 事件处理
}});
//或
$('#my-dialog').dialog()
.on('dialogdrag', function(event, ui) {
// 事件处理
});
当用户停止拖拽对话框时进行的事件处理：
$('#my-dialog').dialog({dragStop: function(event, ui) {
// 事件处理
}});
//或
$('#my-dialog').dialog()
.on('dialogdragstop', function(event, ui) {
// 事件处理
});
当用户开始调整对话框大小时进行的事件处理：
$('#my-dialog').dialog({resizeStart: function(event, ui) {
// 事件处理
}});
//或
$('#my-dialog').dialog()
.on('dialogresizestart', function(event, ui) {
// 事件处理
});
当用户进一步调整对话框大小时进行的事件处理：
$('#my-dialog').dialog({resize: function(event, ui) {
// 事件处理
}});
//或
$('#my-dialog').dialog()
.on('dialogresize', function(event, ui) {
// 事件处理
});
当用户完成调整对话框大小时进行的事件处理：
$('#my-dialog').dialog({resizeStop: function(event, ui) {
// 事件处理
}});
//或
$('#my-dialog').dialog()
.on('dialogresizestop', function(event, ui) {
// 事件处理
});
当用户关闭对话框时进行的事件处理：
$('#my-dialog').dialog({close: function(event, ui) {
// 事件处理
}});
//或
$('#my-dialog').dialog()
.on('dialogclose', function(event, ui) {
// 事件处理
});
7.6.4 调用对话框的方法
对话框微件的一些方法与本章开头讲的折叠菜单微件以及第6章讲的可拖曳交互组件的方法相似。这些方法是destroy、disable、enable、option和widget。
从页面完全移除对话框：
$('#my-dialog').dialog('destroy');
禁用对话框：
$('#my-dialog').dialog('disable');
启用对话框：
$('#my-dialog').dialog('enable');
获取或设置对话框的值：
$('#my-dialog').dialog('option', options);
返回对话框元素：
$('#my-dialog').dialog('widget');
关闭当前打开的对话框。你可以把它当成隐藏函数。对话框可以在关闭后被复用：
$('#my-dialog').dialog('close');
返回对话框当前是否被打开：
$('#my-dialog').dialog('isOpen');
如果对话框隐藏在其他对话框后，则把它移动到前面来：
$('#my-dialog').dialog('moveToTop');
打开一个先前关闭的对话框或一个通过选项autoOpen:false创建的对话框：
$('#my-dialog').dialog('open');
