一、介绍blockUI 它是Jquery框架的一个插件，专门用来做提示框、模态窗口的 地址：http://www.malsup.com/jquery/block/ 具体的使用方法和demo里面都写得很清楚，我不再一一陈述 二、重写javascript中的alert，使得所有调用alert的地方都有统一的样式 这里我提供一个js文件 这里我故意把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放上来！请大家共同研究！
$.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); }); }
发表于 @ 2008年07月02日 14:22:00|评论(loading...)|编辑|收藏