【原创】使用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+="

" dhtml+="

"+title+"

" dhtml+="

"+message+"

" dhtml+="

" dhtml+=" " dhtml+=" " dhtml+="

" dhtml+="

" $.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+="

" dhtml+="

消息框

" dhtml+="

"+message+"

" dhtml+="

" dhtml+=" "

　　dhtml+="

" dhtml+="

" $.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方法，调试不太方便

　　三、在页面调用的时候需要引用的资源文件

　　

　　

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



本文转自

http://www.cnblogs.com/goody9807/archive/2008/03/11/1100165.html