jQuery 入门教程(33): jQuery UI Dialog 示例（一）
jQuery Dialog组件用来显示对话框，模式或非模式的。
基本用法
1<!doctype html>2<html lang="en">3<head>4 <meta charset="utf-8" />5 <title>jQuery UI Demos</title>6 <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />7 <script src="scripts/jquery-1.9.1.js"></script>8 <script src="scripts/jquery-ui-1.10.1.custom.js"></script>9 <script>10 $(function () {11 $("#dialog").dialog();12 });13 </script>14</head>15<body>16 17<div id="dialog" title="Basic dialog">18 <p>This is the default dialog which19 is useful for displaying information.20 The dialog window can be moved,21 resized and closed with the 'x' icon.</p>22</div>23 24 25</body>26</html>
对话框的缺省显示有“X”关闭按钮，可以缩放，移动。
动画显示效果
可以为对话框显示和关闭添加动画效果，如果不希望对话框一开始就显示（这可能是大部分情况，在点击按钮或是某个事件发生后再显示对话框）可以通过配置autoOpen=false来设置。
1<!doctype html>2<html lang="en">3<head>4 <meta charset="utf-8" />5 <title>jQuery UI Demos</title>6 <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />7 <script src="scripts/jquery-1.9.1.js"></script>8 <script src="scripts/jquery-ui-1.10.1.custom.js"></script>9 <script>10 $(function () {11 $("#dialog").dialog({12 autoOpen: false,13 show: {14 effect: "blind",15 duration: 100016 },17 hide: {18 effect: "explode",19 duration: 100020 }21 });22 23 $("#opener").click(function () {24 $("#dialog").dialog("open");25 });26 });27 </script>28</head>29<body>30 31<div id="dialog" title="Basic dialog">32 <p>This is an animated dialog which is useful33 for displaying information.34 The dialog window can be moved,35 resized and closed with the 'x' icon.</p>36</div>37 <button id="opener">Open Dialog</button>38 39</body>40</html>
show 和 hide支持的动画效果，后面再专门介绍，这些效果同时使用与其它方面，为jQuery支持的通用的动态效果。