【原创】使用blockUI制作自定义的漂亮的网页提示框(代替confirm和alert)

一、介绍blockUI

    它是Jquery框架的一个插件，专门用来做提示框、模态窗口的

    地址：http://www.malsup.com/jquery/block/

    具体的使用方法和demo里面都写得很清楚，我不再一一陈述

二、重写javascript中的alert，使得所有调用alert的地方都有统一的样式

        这里我提供一个js文件

        

$.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 );
    });        

    
}

这里我故意把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放上来！请大家共同研究！