首页 > 程序开发 > web前端 > JavaScript >

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

2013-04-03

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

模式对话框

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

相关文章
最新文章
热点推荐