jquery ui 提供了强大的dialog功能，基本能满足开发的功能。
先上一个简单的例子：
【代码】
<script> $(function() { $( "#dialog" ).dialog({ buttons: { "Ok": function() { $(this).dialog("close"); } } }); }); </script>
<div id="dialog" title="Basicdialog"> < p>
This is the default dialog which is useful for displaying information.
The dialog window can be moved, resized and closed with the 'x' icon.
< /p>
</div>
具体用法还是简单的，总结如下：
一、需要加载的js和css
请记住顺序，加载错的会导致意想不到的结果。
（1）jquery.js
（2）jquery.ui.core.js
（3）需要的效果:jquery.ui.xx.js
widget, mouse, diaggable, resizable, position的js,
如果不加载个别js，会导致窗口相应的功能失效，比如 定位，拖动，缩放。
（4）jquery.ui.dialog.js
（5）如果需要窗口弹出或者隐藏的 绚丽效果
a、需要加载 jquery.effects.core.js
b、加载相应的效果，如需要explode效果，加载jquery.effects.explode.js
【代码示例】
<script src="../js/jquery-1.7.1.js"></script> <script src="../js/ui/jquery.ui.core.js"></script> <script src="../js/ui/jquery.ui.widget.js"></script> <script src="../js/ui/jquery.ui.mouse.js"></script> <script src="../js/ui/jquery.ui.draggable.js"></script> <script src="../js/ui/jquery.ui.resizable.js"></script> <script src="../js/ui/jquery.ui.position.js"></script> <script src="../js/ui/jquery.ui.dialog.js"></script>
<script src="../js/ui/jquery.effects.core.js"></script> <script src="../js/ui/jquery.effects.blind.js"></script>
二、页面上的html
页面上需要一个装dialog的容器，需要一个固定ID,控制弹出窗口的内容。 至于这个容器里面的内容，可以事先编进去（比如一个table,form），也可以在触发控件时在加载进去，或者ajax加载进去。
1、html固定格式的弹出窗口
<div id = "dialog_div" title="弹出窗口的标题">
这里是窗口里面显示的内容
< /div>
2、不同情况的加载内容，可以定义一个空标签，待js加载
<div id = "dialog_div" >< /div>
三、触发窗口弹出的js
主要函数如下：$("dialog_div").dialog();
dialog函数有一个强大的参数库，如下
【参数】
| 参数 | 默认值 | 作用 |
| autoOpen | true |
是否自动打开dialog窗口。当属性为false的时候，一开始隐藏窗口， 直到.dialog("open")的时候才弹出dialog窗口 |
| buttons | {} | 显示一个按钮，并写上按钮的文本，设置按钮点击函数 |
| closeOnEscpe | true | 是否点击键盘ESC键关闭dialog |
| dialogClass | null | 为窗口加上的class属性 |
|
diaggable resizable |
true | 是否能拖动、缩放 （必须加载相应的js） |
|
width height |
auto | 窗口的长宽 |
|
maxWidth maxHeight |
null |
长宽的最大值 |
|
minWidth minHeight |
150 |
长宽的最小值 |
|
hide show |
null |
当dialog关闭和打开时候的效果。（必须加载相应的jquery.effects.xx.js） 效果有：blind,bounce,clip,drop,explode,fade,fold, highlight,pulsate,puff,slide,scale,size,shake,transfer |
| modal | false | 是否使用模式窗口，模式窗口打开后，页面其他元素将不能点击，直到关闭模式窗口 |
| title | null | dialog的标题文字 |
| position | center |
dialog的显示位置：可以是'center', 'left', 'right', 'top', 'bottom', 也可以是top和left的偏移量, 也可以是一个字符串数组例如['right','top']。 |
| zIndex | 1000 | dialog的zindex值 |
| stack | true | 是否在dialog获得焦点是，dialog将在最上面 |
| bgiframe | false | 在IE6下，让后面那个灰屏盖住select(需要调用jquery.bgiframe.js) |
| disabled | false | 当为true是，关掉这个dialog |
【代码示例】
<script> // increase the default animation speed to exaggerate the effect $(function() { $( "#dialog" ).dialog({ autoOpen: false, show: "blind", hide: "explode"，
buttons: { "Ok": function() { $(this).dialog("close"); }, "Cancel": function() { $(this).dialog("close"); } } });
$( "#opener" ).click(function() { $( "#dialog" ).dialog( "open" ); return false; }); }); </script>
<div id="dialog" title="Basicdialog"> < p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> < /div>
<button id="opener">OpenDialog</button>
四、其他
1、事件
(1) beforeclose 当dialog尝试关闭的时候此事件将被触发，如果返回false，那么关闭将被阻止
(2) close 关闭dialog的时候此事件将被触发
(3) open 打开dialog的时候此事件将被触发
(4) focus 获得焦点的时候此事件将被触发
(5) dragStart 开始拖动dialog的时候此事件将被触发
(6) drag 拖动dialog过程此事件将被触发
(7) resizeStart 开始缩放dialog的时候此事件将被触发
(8) resize 缩放dialog过程的时候此事件将被触发
(9) resizeStop 缩放结束的时候此事件将被触发
【示例】
$('.selector').dialog({ beforeclose: function(event, ui) { ... } });
2、方法
(1)destroy 摧毁 例：.dialog( 'destroy' ) (2)disable dialog不可用，例：.dialog('disable'); (3)enable dialog可用，
(4)close，open 关闭、打开dialog (5)option 设置和获取dialog属性，
例如：.dialog( 'option' , optionName , [value] )，如果没有value，将是获取。 (6)isOpen 如果dialog打开则返回true，例如：.dialog('isOpen') (7)moveToTop 将dialog移到最上层，例如：.dialog( 'moveToTop' )。
【示例】
$( "#opener" ).click(function() { $( "#dialog" ).dialog( "open" ); return false; }); });
//点击 opener时，窗口打开