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

xiang588

<span class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: Verdana; font-size: 13px; line-height: 19px;">原文地址：http://www.cnblogs.com/goody9807/archive/2008/03/11/1100165.html


一、介绍blockUI

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

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

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

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

        这里我提供一个js文件

        
<div style="border-right-color: rgb(204, 204, 204); border-right-width: 1px; border-right-style: solid; padding-right: 5px; border-top-color: rgb(204, 204, 204); border-top-width: 1px; border-top-style: solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; border-left-color: rgb(204, 204, 204); border-left-width: 1px; border-left-style: solid; width: 98%; padding-top: 4px; border-bottom-color: rgb(204, 204, 204); border-bottom-width: 1px; border-bottom-style: solid; background-color: rgb(238, 238, 238);">$.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);
    });        

    
}