jQuery UI Dialog 模态窗口
模式对话框
如想对话框显示为模式的，可以通过配置modal: true来设置。
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-modal").dialog({
12 height: 140,
13 modal: true
14 });
15 });
16 </script>
17 </head>
18 <body>
19
20 <div id="dialog-modal" title="Basic modal dialog">
21 <p>
22 Adding the modal overlay screen makes the dialog
23 look more prominent because it dims out the page content.
24 </p>
25 </div>
26
27 <p>
28 Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>.
29 Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante.
30 Etiam bibendum, enim faucibus aliquet rhoncus,
31 arcu felis ultricies neque, sit amet auctor elit eros a lectus.
32 </p>
33 </body>
34 </html>
添加确认和取消按钮
可以通过配置主按钮，和从按钮的方法来为对话框添加按钮，此时如果需要把”X”从右上角去掉，可以通过CSS来实现，具体可以参考下例：使用dialogClass: “no-close”
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 <style>
10 .no-close .ui-dialog-titlebar-close {
11 display: none;
12 }
13 </style>
14 <script>
15 $(function () {
16 $("#dialog-confirm").dialog({
17 dialogClass: "no-close",
18 resizable: false,
19 width: 400,
20 height: 250,
21 modal: true,
22 buttons: {
23 "Delete all items": function () {
24 $(this).dialog("close");
25 },
26 Cancel: function () {
27 $(this).dialog("close");
28 }
29 }
30 });
31 });
32 </script>
33 </head>
34 <body>
35
36 <div id="dialog-confirm" title="Empty the recycle bin?">
37 <p>
38
39 <span class="ui-icon ui-icon-alert"
40 style="float: left; margin: 0 7px 20px 0;"></span>
41 These items will be permanently deleted
42 and cannot be recovered. Are you sure?
43 </p>
44 </div>
45
46 <p>
47 Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>.
48 Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante.
49 Etiam bibendum, enim faucibus aliquet rhoncus,
50 arcu felis ultricies neque,
51 sit amet auctor elit eros a lectus.
52 </p>
53
54
55 </body>
56 </html>
原文： http://www.2cto.com/kf/201304/200174.html