jQuery 入门教程(34): jQuery UI Dialog 示例（二）

来源：互联网发布：mac文明编辑：程序博客网时间：2024/06/06 04:28

模式对话框

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

0 0