jQuery 入门教程(34): jQuery UI Dialog 示例（二）
转载
模式对话框
如想对话框显示为模式的，可以通过配置modal: true来设置。
2 | <htmllang="en"> |
4 | <metacharset="utf-8"/> |
5 | <title>jQuery UI Demos</title> |
6 | <linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/> |
7 | <scriptsrc="scripts/jquery-1.9.1.js"></script> |
8 | <scriptsrc="scripts/jquery-ui-1.10.1.custom.js"></script> |
9 | <script> |
10 | $(function () { |
11 | $("#dialog-modal").dialog({ |
12 | height: 140, |
13 | modal: true |
16 | </script> |
17 | </head> |
20 | <divid="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> |
27 | <p> |
28 | Sed vel diam id libero <ahref="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”
2 | <htmllang="en"> |
4 | <metacharset="utf-8"/> |
5 | <title>jQuery UI Demos</title> |
6 | <linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/> |
7 | <scriptsrc="scripts/jquery-1.9.1.js"></script> |
8 | <scriptsrc="scripts/jquery-ui-1.10.1.custom.js"></script> |
9 | <style> |
10 | .no-close .ui-dialog-titlebar-close { |
11 | display: none; |
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, |
23 | "Delete all items": function () { |
24 | $(this).dialog("close"); |
26 | Cancel: function () { |
27 | $(this).dialog("close"); |
32 | </script> |
33 | </head> |
36 | <divid="dialog-confirm"title="Empty the recycle bin?"> |
37 | <p> |
39 | <spanclass="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> |
46 | <p> |
47 | Sed vel diam id libero <ahref="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> |
55 | </body> |
56 | </html> |
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
