本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第7章，第7.6节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
如果想使网页中的一小部分内容脱颖而出，有几种方法可以实现它。其中一个方法是用对话框的形式显示内容。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');
相关资源：敏捷开发V1.0.pptx