一、介绍blockUI
它是Jquery框架的一个插件，专门用来做提示框、模态窗口的
地址：/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="-50px00-200px";
$.blockUI.defaults.pageMessageCSS.width="400px";
$.blockUI.defaults.overlayCSS.cursor='normal';
functionConfirmer(title,message,callback,callback1,txt1,txt2){
if(!txt1){
txt1="确定";
}
if(!txt2){
txt2="取消";
}
vardhtml="";
dhtml+="<divclass='DialogContainer'>";
dhtml+="<divclass='Title'>"+title+"</div>";
dhtml+="<divclass='Content'>"+message+"</div>"
dhtml+="<divclass='buttons'>";
dhtml+="<inputtype='button'value='"+txt1+"'id='btn_Confirmer_OK'/>"
dhtml+="<inputtype='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);
}
});
}
functionAlert(message,callback){
vardhtml="";
dhtml+="<divclass='DialogContainer'>";
dhtml+="<divclass='Title'>消息框</div>";
dhtml+="<divclass='Content'>"+message+"</div>"
dhtml+="<divclass='buttons'>";
dhtml+="<inputtype='button'value='确定'id='btn_alert_Ok'/>"
dhtml+="</div>"
dhtml+="</div>";
$.extend($.blockUI.defaults.pageMessageCSS,{border:'solid1px#7199b1'});
$.blockUI(dhtml);
$("#btn_alert_Ok").focus();
$("#btn_alert_Ok").click(function(){
$.unblockUI();
setTimeout(function(){
eval(callback);
},500);
});
}
这里我故意把alert改为了大写的Alert，因为我觉得如果重写以前的alert方法，调试不太方便
三、在页面调用的时候需要引用的资源文件
<linkhref="/css/DialogUI.css"rel="stylesheet"type="text/css"/>
<scripttype="text/javascript"src="/js/blockUI.js"></script>
<scripttype="text/javascript"src="/js/commondialog.js"charset="gb2312"></script>
别忘了还需要引用jquery，因为blockUI是jqery的插件里面用到它的一些方法
<scriptsrc="/js/jquery-1.2.1.js"type="text/javascript"></script>
四、分析css文件
div.blockUI{
border:1pxsolidred;
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.buttonsinput{
margin-left:20px;
text-align:center;
background-color:#ffffff;
border-right:#7199b12pxsolid;
padding-right:8px;
border-top:#7499ae1pxsolid;
padding-left:8px;
font-size:14px;
background-image:url(../images/anniu/out.gif);
border-left:#7499ae1pxsolid;
cursor:hand;
color:#053152;
padding-top:5px;
padding-bottom:0px;
border-bottom:#7199b12pxsolid;
}
怎么样，是不是很简单啊，回头我做一个demo放上来！请大家共同研究！
