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

阿里阅读：585 2021-04-01 09:58:17 评论：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>

添加确认和取消按钮
可以通过配置主按钮，和从按钮的方法来为对话框添加按钮，此时如果需要把”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>

标签:jquery

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。