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

ゝ一世哀愁。 2024-02-17 14:11 133阅读 0赞



模式对话框

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

发表评论

表情：
评论列表 （有 0 条评论，133人围观）

还没有评论，来说两句吧...

相关阅读