使用CSS和jQuery实现对话框
因为项目中要显示一些对话框，但用alert显得太丑，后从网上找了一些插件，但有觉得不好用，因此自己试用CSS和jQuery写了一个对话框，代码如下：
1 <!DOCTYPE html> 2 <html class="um landscape min-width-240px min-width-315px min-width-480px min-width-768px min-width-1024px"> 3 <head> 4 <title></title> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> 7 <link rel="stylesheet" href="css/jquery.mobile-1.0.1.css"> 8 <script src="js/jquery-1.6.4.js"> 9 </script> 10 <script src="js/jquery.mobile-1.0.1.js"> 11 </script> 12 <link rel="stylesheet" href="css/jquery.mobile.simpledialog.css"> 13 <script src="js/jquery.mobile.simpledialog.js"> 14 </script> 15 <link rel="stylesheet" href="css/control_column.css"> 16 <script> 17 $(function(){ 18 $('#btnShowDialog1').click(function(){ 19 messageBox('提示', '提示内容1', 1); 20 }) 21 }) 22 23 function messageBox(title, context, flag, funOK, funCancel) 24 { 25 var strMask = ""; 26 strMask += '<div class="message-box-mask"><p></p><br></div>' 27 var strHtml = ""; 28 strHtml += '<div class="message-box">'; 29 strHtml += '<h3>' + title + '</h3>'; 30 strHtml += '<div class="message-box-context">' + context + '</div>'; 31 strHtml += '<div class="message-box-buttons">'; 32 if(flag == 1) 33 { 34 strHtml += '<a id="btnOK" data-role="button" data-theme="b">确定</a>'; 35 } 36 else if(flag == 2) 37 { 38 strHtml += '<div class="controls_group label_text"><div class="controls_row"><div class="controls_column_first controls_column_2">'; 39 strHtml += '<a id="btnOK" data-role="button" data-theme="b">确定</a></div>'; 40 strHtml += '<div class="controls_column_second controls_column_2">'; 41 strHtml += '<a id="btnCancel" data-role="button" data-theme="b">取消</a></div></div>'; 42 } 43 strHtml += '</div>'; 44 strHtml += '</div>'; 45 $('div[data-role="content"]').append(strMask); 46 $('div[data-role="content"]').append(strHtml); 47 $('.message-box-buttons a').each(function(){ 48 $(this).button(); 49 }); 50 $('.message-box').css('display', 'block'); 51 $('.message-box-mask').css('display', 'block'); 52 $('.message-box-mask').css('opacity', '0.1'); 53 $('.message-box-buttons #btnOK').click(function(){ 54 $('.message-box').css('display', 'none'); 55 $('.message-box-mask').css('display', 'none'); 56 $('.message-box-mask').css('opacity', '0.1'); 57 if(funOK) 58 { 59 funOK(); 60 } 61 }); 62 $('.message-box-buttons #btnCancel').click(function(){ 63 $('.message-box').css('display', 'none'); 64 $('.message-box-mask').css('display', 'none'); 65 $('.message-box-mask').css('opacity', '0.1'); 66 if(funCancel) 67 { 68 funCancel(); 69 } 70 }); 71 } 72 73 </script> 74 <style type="text/css"> 75 .message-box-mask 76 { 77 width:100%; 78 height:100%; 79 line-height:100%; 80 background-color:gray; 81 z-index:100; 82 position:fixed; 83 top:0; 84 left:0; 85 opacity:0.1 !important; 86 } 87 .message-box 88 { 89 width:80%; 90 margin:0 auto; 91 padding:0; 92 text-align:center; 93 position:fixed; 94 top:10%; 95 left:10%; 96 z-index:1000; 97 text-shadow:none !important; 98 background-color:transparent; 99 } 100 101 .message-box h3 102 { 103 width:100%; 104 margin:0 auto; 105 padding:0; 106 background-color:silver; 107 border-top-left-radius:10px; 108 border-top-right-radius:10px; 109 } 110 .message-box-context 111 { 112 width:100%; 113 margin:0 auto; 114 padding:0; 115 background-color:white; 116 text-align:left; 117 } 118 .message-box-buttons 119 { 120 width:100%; 121 margin:0 auto; 122 padding:10px 0; 123 background-color:silver; 124 border-bottom-left-radius:10px; 125 border-bottom-right-radius:10px; 126 } 127 .message-box-buttons .control_row, .message-box-buttons .controls_column_first, .message-box-buttons .controls_column_second 128 { 129 background-color:silver; 130 131 } 132 133 .message-box-buttons .controls_column_first 134 { 135 border-bottom-left-radius:10px; 136 } 137 138 .message-box-buttons .controls_column_second 139 { 140 border-bottom-right-radius:10px; 141 } 142 </style> 143 </head> 144 <body onload="initPage();"> 145 <div data-role="page"> 146 <div data-role="header" data-theme="b" data-position="fixed"> 147 <h1>GroupBox</h1> 148 </div> 149 <div data-role="content"> 150 <div> 151 <a id="btnShowDialog1" data-role="button" data-theme="b">显示对话框</a> 152 </div> 153 <div style="margin-top:100px;"> 154 <a id="btnShowDialog2" data-role="button" data-theme="b" onclick="messageBox('提示','提示内容2', 2)">显示对话框</a> 155 </div> 156 </div> 157 <div data-role="footer" data-theme="b" data-position="fixed"> 158 <h1>GroupBox</h1> 159 </div> 160 </div> 161 </body> 162 </html>
主要思想是通过绝对定位的方式和z-index来使对话框显示在最前面，而为了实现模态对话框的效果，添加了一个mask层，mask的思路也对话框一样。试用效果如下：
使用的使用只用给messageBox函数中传递相关参数就可，算是很方便了。
