模式对话框

如想对话框显示为模式的,可以通过配置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="https://pic1.codesec.net/app_attach/20140910/20140910_31_31492_0.js"></script>

8 <script src="https://pic1.codesec.net/app_attach/20140910/20140910_31_31492_1.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>

jQuery 入门教程(34): jQuery UI Dialog 示例(二)
添加确认和取消按钮
可以通过配置主按钮,和从按钮的方法来为对话框添加按钮,此时如果需要把”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="https://pic1.codesec.net/app_attach/20140910/20140910_31_31492_0.js"></script>

8 <script src="https://pic1.codesec.net/app_attach/20140910/20140910_31_31492_1.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>


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

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: jQueryCSS
代码区博客精选文章
分页:12
转载请注明
本文标题:jQuery 入门教程(34): jQuery UI Dialog 示例(二)
本站链接:https://www.codesec.net/view/31492.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(191)