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