jQuery 入门教程(34): jQuery UI Dialog 示例(二)分析

阿里 阅读:169 2021-04-01 09:58:17 评论:0


模式对话框

如想对话框显示为模式的,可以通过配置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>

20130320006

添加确认和取消按钮
可以通过配置主按钮,和从按钮的方法来为对话框添加按钮,此时如果需要把”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>

20130320007

 
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
关注我们

一个IT知识分享的公众号