使用blockUI制作自定义的漂亮的网页提示框(代替confirm和alert)
<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);
});
}
页:
[1]