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

模式对话框

如想对话框显示为模式的,可以通过配置modal: true来设置。

1
2 <htmllang="en">
3 <head>
4 <metacharset="utf-8"/>
5 <title>jQuery UI Demostitle>
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
14 });
15 });
16 script>
17 head>
18 <body>
19
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>
26
27 <p>
28 Sed vel diam id libero <ahref="http://example.com">rutrum convallisa>.
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
2 <htmllang="en">
3 <head>
4 <metacharset="utf-8"/>
5 <title>jQuery UI Demostitle>
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;
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 <divid="dialog-confirm"title="Empty the recycle bin?">
37 <p>
38
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>
45
46 <p>
47 Sed vel diam id libero <ahref="http://example.com">rutrum convallisa>.
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>

你可能感兴趣的:(jQuery 入门教程(34): jQuery UI Dialog 示例(二))