【原创】使用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放上来！请大家共同研究！