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

模式對話框

如想對話框顯示為模式的,可以通過配置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     <p 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     </p>

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     <p 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     </p>

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

發佈留言