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

在 ASP.NET 使用 jQuery BlockUI 插件 http://www.dotblogs.com.tw/jeff377/archive/2008/04/19/2946.aspx

JQuery Block UI V2 http://www.cssrain.cn/demo/blockUI-V2/jQuery/blockUI/jQueryBlockUI.html

BlockUI Plugin - 功能完善的頁面、訊息遮罩 http://jsgears.com/thread-72-1-1.html