使用CSS和jQuery实现对话框

因为项目中要显示一些对话框，但用alert显得太丑，后从网上找了一些插件，但有觉得不好用，因此自己试用CSS和jQuery写了一个对话框，代码如下：

 <!DOCTYPE html>
 <html  class="um landscape min-width-240px min-width-315px min-width-480px min-width-768px min-width-1024px">
     <head>
         <title></title>
         <meta charset="utf-8">
         <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">
         <link rel="stylesheet" href="css/jquery.mobile-1.0.1.css">
         <script src="js/jquery-1.6.4.js">
          </script>
           <script src="js/jquery.mobile-1.0.1.js">
           </script>
         <link rel="stylesheet" href="css/jquery.mobile.simpledialog.css">
         <script src="js/jquery.mobile.simpledialog.js">
           </script>
         <link rel="stylesheet" href="css/control_column.css">
         <script>
             $(function(){
                 $('#btnShowDialog1').click(function(){
                     messageBox('提示', '提示内容1', 1);
                 })
             })

             function messageBox(title, context, flag, funOK, funCancel)
             {
                 var strMask = "";
                 strMask += '<div class="message-box-mask"><p></p><br></div>'
                 var strHtml = "";
                 strHtml += '<div class="message-box">';
                 strHtml += '<h3>' + title + '</h3>';
                 strHtml += '<div class="message-box-context">' + context + '</div>';
                 strHtml += '<div class="message-box-buttons">';
                 if(flag == 1)
                 {
                     strHtml += '<a id="btnOK" data-role="button" data-theme="b">确定</a>';
                 }
                 else if(flag == 2)
                 {
                     strHtml += '<div class="controls_group label_text"><div class="controls_row"><div class="controls_column_first controls_column_2">';
                     strHtml += '<a id="btnOK" data-role="button" data-theme="b">确定</a></div>';
                     strHtml += '<div class="controls_column_second  controls_column_2">';
                     strHtml += '<a id="btnCancel" data-role="button" data-theme="b">取消</a></div></div>';
                 }
                 strHtml += '</div>';
                 strHtml += '</div>';
                 $('div[data-role="content"]').append(strMask);
                 $('div[data-role="content"]').append(strHtml);
                 $('.message-box-buttons a').each(function(){
                     $(this).button();
                 });
                 $('.message-box').css('display', 'block');
                 $('.message-box-mask').css('display', 'block');
                 $('.message-box-mask').css('opacity', '0.1');
                 $('.message-box-buttons #btnOK').click(function(){
                     $('.message-box').css('display', 'none');
                     $('.message-box-mask').css('display', 'none');
                     $('.message-box-mask').css('opacity', '0.1');
                     if(funOK)
                     {
                         funOK();
                     }
                 });
                 $('.message-box-buttons #btnCancel').click(function(){
                     $('.message-box').css('display', 'none');
                     $('.message-box-mask').css('display', 'none');
                     $('.message-box-mask').css('opacity', '0.1');
                     if(funCancel)
                     {
                         funCancel();
                     }
                 });
             }

         </script>
         <style type="text/css">
             .message-box-mask
             {
                 width:100%;
                 height:100%;
                 line-height:100%;
                 background-color:gray;
                 z-index:100;
                 position:fixed;
                 top:0;
                 left:0;
                 opacity:0.1 !important;
             }
             .message-box
             {
                 width:80%;
                 margin:0 auto;
                 padding:0;
                 text-align:center;
                 position:fixed;
                 top:10%;
                 left:10%;
                 z-index:1000;
                 text-shadow:none !important;
                 background-color:transparent;
             }

             .message-box h3
             {
                 width:100%;
                 margin:0 auto;
                 padding:0;
                 background-color:silver;
                 border-top-left-radius:10px;
                 border-top-right-radius:10px;
             }
             .message-box-context
             {
                 width:100%;
                 margin:0 auto;
                 padding:0;
                 background-color:white;
                 text-align:left;
             }
             .message-box-buttons
             {
                 width:100%;
                 margin:0 auto;
                 padding:10px 0;
                 background-color:silver;
                 border-bottom-left-radius:10px;
                 border-bottom-right-radius:10px;
             }
             .message-box-buttons .control_row, .message-box-buttons .controls_column_first, .message-box-buttons .controls_column_second
             {
                 background-color:silver;

             }

             .message-box-buttons .controls_column_first
             {
                 border-bottom-left-radius:10px;
             }

             .message-box-buttons .controls_column_second
             {
                 border-bottom-right-radius:10px;
             }
         </style>
     </head>
     <body onload="initPage();">
         <div data-role="page">
             <div data-role="header" data-theme="b" data-position="fixed">
                 <h1>GroupBox</h1>
             </div>
             <div data-role="content">
                 <div>
                     <a id="btnShowDialog1" data-role="button" data-theme="b">显示对话框</a>
                 </div>
                 <div style="margin-top:100px;">
                     <a id="btnShowDialog2" data-role="button" data-theme="b" onclick="messageBox('提示','提示内容2', 2)">显示对话框</a>
                 </div>
             </div>
             <div data-role="footer" data-theme="b"  data-position="fixed">
                 <h1>GroupBox</h1>
             </div>
         </div>
     </body>
 </html>

主要思想是通过绝对定位的方式和z-index来使对话框显示在最前面，而为了实现模态对话框的效果，添加了一个mask层，mask的思路也对话框一样。试用效果如下：

使用的使用只用给messageBox函数中传递相关参数就可，算是很方便了。