【原創】使用blockUI製作自定義的漂亮的網頁提示框(代替confirm和alert)

一、介紹blockUI     它是Jquery框架的一個插件，專門用來做提示框、模態窗口的     地址：http://www.malsup.com/jquery/block/     具體的使用方法和demo裏面都寫得很清楚，我不再一一陳述 二、重寫javascript中的alert，使得所有調用alert的地方都有統一的樣式         這裏我提供一個js文件          這裏我故意把alert改爲了大寫的Alert，因爲我覺得如果重寫以前的alert方法，調試不太方便 三、在頁面調用的時候需要引用的資源文件

    <link href="/css/DialogUI.css" rel="stylesheet" type="text/css" />     <script type="text/javascript" src="/js/blockUI.js" ></script>     <script type="text/javascript" src="/js/commondialog.js" charset="gb2312"></script>

別忘了還需要引用jquery，因爲blockUI是jqery的插件裏面用到它的一些方法

<script src="/js/jquery-1.2.1.js" type="text/javascript"></script>

四、分析css文件

div.blockUI{     border:1px solid red;     background-color:#335577; } //整體的DIV層樣式 .DialogContainer{     width:400px;     height:200px;     cursor:default;      } //提示框裏面的樣式 .DialogContainer .Title{     background-color:#7199b1;     color:white;     font:caption;     text-align:left;     padding-top:3px;     padding-bottom:3px;     padding-left:5px; } //標題樣式 .DialogContainer .Content{     font-size:12px;     line-height:25px;     height:160px;     padding-top:20px;     padding-left:15px;     text-align:left; } //內容樣式 .DialogContainer .buttons{     text-align:right;     padding-right:20px;     padding-bottom:10px; } //按鈕樣式 .DialogContainer .buttons input{     margin-left:20px;     text-align:center;     background-color: #ffffff;     border-right: #7199b1 2px solid;     padding-right: 8px;     border-top: #7499ae 1px solid;     padding-left: 8px;     font-size: 14px;     background-image: url(../images/anniu/out.gif);     border-left: #7499ae 1px solid;     cursor: hand;     color: #053152;     padding-top: 5px;     padding-bottom: 0px;     border-bottom: #7199b1 2px solid; }

怎麼樣，是不是很簡單啊，回頭我做一個demo放上來！請大家共同研究！

 

$.blockUI.defaults.overlayCSS.backgroundColor="#d5d5d5"; $.blockUI.defaults.pageMessageCSS.border="none"; //$.blockUI.defaults.pageMessageCSS.backgroundColor="#D6D6D6"; $.blockUI.defaults.pageMessageCSS.margin="-50px 0 0 -200px"; $.blockUI.defaults.pageMessageCSS.width="400px"; $.blockUI.defaults.overlayCSS.cursor='normal'; function Confirmer(title,message,callback,callback1,txt1,txt2){          if(!txt1){         txt1 = "確定";     }          if(!txt2){         txt2 = "取消";     }     var dhtml="";     dhtml+="<div class='DialogContainer'>";     dhtml+="    <div class='Title'>"+title+"</div>";     dhtml+="    <div class='Content'>"+message+"</div>"     dhtml+="    <div class='buttons'>";     dhtml+="        <input type='button' value='"+txt1+"' id='btn_Confirmer_OK'/>"     dhtml+="        <input type='button' value='"+txt2+"' id='btn_Confirmer_CANCEL'/>"     dhtml+="    </div>"     dhtml+="</div>";     $.blockUI(dhtml);     $("#btn_Confirmer_OK").click(function(){                 $.unblockUI();             setTimeout(function(){                 $(callback);             },500);     });          $("#btn_Confirmer_CANCEL").click(function(){         $.unblockUI();         if(callback1){             $(callback1);         }     }); } function Alert(message,callback){          var dhtml="";     dhtml+="<div class='DialogContainer'>";     dhtml+="    <div class='Title'>消息框</div>";     dhtml+="    <div class='Content'>"+message+"</div>"     dhtml+="    <div class='buttons'>";     dhtml+="        <input type='button' value='確定' id='btn_alert_Ok' />"          dhtml+="    </div>"     dhtml+="</div>";     $.extend($.blockUI.defaults.pageMessageCSS, { border:'solid 1px #7199b1'});     $.blockUI(dhtml);       $("#btn_alert_Ok").focus();     $("#btn_alert_Ok").click(function(){                  $.unblockUI();             setTimeout(function(){             eval(callback);         },500);     });              }