aiyan3344
- 浏览: 199871 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
zoutuo1986：
翻过的帖子，这篇讲配置最细
solr -
18612536750：
Struts2 标签,取得Map的某一个key对应value值 -
zhangzhihua5：
solr -
xiaguangme：
“capacity才是真正的Entry数组的大小，即真实的En ...
源码阅读之Map和Set -
qiyang199132：
我擦民工 都没人来。。 我来捧场了
JSP 防止重复提交 防止重复刷新 防止后退问题以及处理方式
美化js系统函数alert，confirm，prompt，并实现lightbox效果（http://blog.csdn.net/showbo/archive/）
- 博客分类：
- JavaScript
view plaincopy to clipboardprint?
var Showbo={author:'showbo',homepage:'http://www.code-design.cn'};
//是否为ie浏览器
Showbo.IsIE=!!document.all;
//ie浏览器版本
Showbo.IEVersion=(function(){if(!Showbo.IsIE)return -1;try{return parseFloat(/msie ([\d\.]+)/i.exec(navigator.userAgent)[1]);}catch(e){return -1;}})();
//按id获取对象
Showbo.$=function(Id,isFrame){var o;if("string"==typeof(Id))o= document.getElementById(Id);else if("object"==typeof(Id))o= Id;else return null;return isFrame?(Showbo.IsIE?frames[Id]:o.contentWindow):o;}
//按标签名称获取对象
//页面的高和宽******************************
Showbo.isStrict=document.compatMode == "CSS1Compat";
Showbo.BodyScale={x:0,y:0,tx:0,ty:0};//（x，y）：当前的浏览器容器大小 （tx，ty）：总的页面滚动宽度和高度
Showbo.getClientHeight=function(){/*if(Showbo.IsIE)*/return Showbo.isStrict ? document.documentElement.clientHeight :document.body.clientHeight;/*else return self.innerHeight;*/}
Showbo.getScrollHeight=function(){var h=!Showbo.isStrict?document.body.scrollHeight:document.documentElement.scrollHeight;return Math.max(h,this.getClientHeight());}
Showbo.getHeight=function(full){return full?this.getScrollHeight():this.getClientHeight();}
Showbo.getClientWidth=function(){/*if(Showbo.IsIE)*/return Showbo.isStrict?document.documentElement.clientWidth:document.body.clientWidth;/*else return self.innerWidth;*/}
Showbo.getScrollWidth=function(){var w=!Showbo.isStrict?document.body.scrollWidth:document.documentElement.scrollWidth;return Math.max(w,this.getClientWidth());}
Showbo.getWidth=function(full){return full?this.getScrollWidth():this.getClientWidth();}
Showbo.initBodyScale=function(){Showbo.BodyScale.x=Showbo.getWidth(false);Showbo.BodyScale.y=Showbo.getHeight(false);Showbo.BodyScale.tx=Showbo.getWidth(true);Showbo.BodyScale.ty=Showbo.getHeight(true);}
//页面的高和宽******************************
Showbo.Msg={
INFO:'info',
ERROR:'error',
WARNING:'warning',
IsInit:false,
timer:null,
dvTitle:null,
dvCT:null,
dvBottom:null,
dvBtns:null,
lightBox:null,
dvMsgBox:null,
defaultWidth:300,
moveProcessbar:function(){
var o=Showbo.$('dvProcessbar'),w=o.style.width;
if(w=='')w=20;
else{
w=parseInt(w)+20;
if(w>100)w=0;
}
o.style.width=w+'%';
},
InitMsg:function(width){
//ie下不按照添加事件的循序来执行，所以要注意在调用alert等方法时要检测是否已经初始化IsInit=true
var ifStr='<iframe src="javascript:false" mce_src="javascript:false" style="position:absolute; visibility:inherit; top:0px;left:0px;width:100%; height:100%; z-index:-1;'
+'filter=\'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)\';"></iframe>',
html='<div class="top"><div class="right"><div class="title" id="dvMsgTitle"></div></div></div>'+
'<div class="body"><div class="right"><div class="ct" id="dvMsgCT"></div></div></div>'+
'<div class="bottom" id="dvMsgBottom"><div class="right"><div class="btn" id="dvMsgBtns"></div></div></div>';
this.dvMsgBox=document.createElement("div");
this.dvMsgBox.id="dvMsgBox";
this.dvMsgBox.innerHTML+=html;
document.body.appendChild(this.dvMsgBox);
this.lightBox=document.createElement("div");
this.lightBox.id="ShowBolightBox";
document.body.appendChild(this.lightBox);
if(Showbo.IsIE&&Showbo.IEVersion<7){//加iframe层修正ie6下无法遮盖住select的问题
this.lightBox.innerHTML+=ifStr;
this.dvMsgBox.innerHTML+=ifStr;
}
this.dvBottom=Showbo.$('dvMsgBottom');
this.dvBtns=Showbo.$('dvMsgBtns');
this.dvCT=Showbo.$('dvMsgCT');
this.dvTitle=Showbo.$('dvMsgTitle');
this.IsInit=true;
},
checkDOMLast:function(){//此方法非常关键，要不无法显示弹出窗口。两个对象dvMsgBox和lightBox必须处在body的最后两个节点内
if(document.body.lastChild!=this.lightBox){
document.body.appendChild(this.dvMsgBox);
document.body.appendChild(this.lightBox);
}
},
createBtn:function(p,v,fn){
var btn=document.createElement("input");
btn.type="button";
btn.className='btn';
btn.value=v;
btn.onmouseover=function(){this.className='btnfocus';}
btn.onmouseout=function(){this.className='btn';}
btn.onclick=function(){
Showbo.Msg.hide();
if(fn)fn(p);
}
return btn;
},
alert:function(msg){
this.show({buttons:{yes:'确认'},msg:msg});
},
confirm:function(msg,fn){
//fn为回调函数，参数和show方法的一致
this.show({buttons:{yes:'确认',no:'取消'},msg:msg,title:'提示',fn:fn});
},
prompt:function(labelWord,defaultValue,txtId,fn){
if(!labelWord)labelWord='请输入：';
if(!defaultValue)defaultValue="";
if(!txtId)txtId="msg_txtInput";
this.show({title:'输入提示',msg:labelWord+'<input type="text" id="'+txtId+'" style="width:200px" value="'+defaultValue+'"/>',buttons:{yes:'确认',no:'取消'},fn:fn});
},
wait:function(msg,title){
if(!msg)msg='正在处理..';
this.show({title:title,msg:msg,wait:true});
},
show:function(cfg){
//cfg:{title:'',msg:'',wait:true,icon:'默认为信息',buttons:{yes:'',no:''},fn:function(btn){回调函数,btn为点击的按钮，可以为yes，no},width:显示层的宽}
//如果是等待则wait后面的配置不需要了。。
if(!cfg)throw("没有指定配置文件！");
//添加窗体大小改变监听
if(Showbo.IsIE)window.attachEvent("onresize",this.onResize);
else window.addEventListener("resize",this.onResize,false);
if(!this.IsInit)this.InitMsg();//初始化dom对象
else this.checkDOMLast();//检查是否在最后
//检查是否要指定宽，默认为300
if(cfg.width)this.defaultWidth=cfg.width;
this.dvMsgBox.style.width=this.defaultWidth+'px';
//可以直接使用show方法停止为进度条的窗口
if(this.timer){clearInterval(this.timer);this.timer=null;}
this.dvTitle.innerHTML='';
if(cfg.title)this.dvTitle.innerHTML=cfg.title;
this.dvCT.innerHTML='';
if(cfg.wait){
if(cfg.msg)this.dvCT.innerHTML=cfg.msg;
this.dvCT.innerHTML+='<div class="pro"><div class="bg" id="dvProcessbar"></div></div>';
this.dvBtns.innerHTML='';
this.dvBottom.style.height='10px';
this.timer=setInterval(function(){Showbo.Msg.moveProcessbar();},1000);
}
else{
//if(!cfg.icon)cfg.icon=Showbo.Msg.INFO;
if(!cfg.buttons||(!cfg.buttons.yes&&!cfg.buttons.no)){
cfg.buttons={yes:'确定'};
}
if(cfg.icon)this.dvCT.innerHTML='<div class="icon '+cfg.icon+'"></div>';
if(cfg.msg)this.dvCT.innerHTML+=cfg.msg+'<div class="clear"></div>';
this.dvBottom.style.height='45px';
this.dvBtns.innerHTML='<div class="height"></div>';
if(cfg.buttons.yes){
this.dvBtns.appendChild(this.createBtn('yes',cfg.buttons.yes,cfg.fn));
if(cfg.buttons.no)this.dvBtns.appendChild(document.createTextNode(' '));
}
if(cfg.buttons.no)this.dvBtns.appendChild(this.createBtn('no',cfg.buttons.no,cfg.fn));
}
Showbo.initBodyScale();
this.dvMsgBox.style.display='block';
this.lightBox.style.display='block';
this.onResize(false);
},
hide:function(){
this.dvMsgBox.style.display='none';
this.lightBox.style.display='none';
if(this.timer){clearInterval(this.timer);this.timer=null;}
if(Showbo.IsIE)window.detachEvent('onresize',this.onResize);
else window.removeEventListener('resize',this.onResize,false);
},
onResize:function(isResize){
if(isResize)Showbo.initBodyScale();
Showbo.Msg.lightBox.style.width=Showbo.BodyScale.tx+'px';
Showbo.Msg.lightBox.style.height=Showbo.BodyScale.ty+'px';
Showbo.Msg.dvMsgBox.style.top=document.documentElement.scrollTop+Math.floor((Showbo.BodyScale.y-Showbo.Msg.dvMsgBox.offsetHeight)/2)+'px';
Showbo.Msg.dvMsgBox.style.left=Math.floor((Showbo.BodyScale.x-Showbo.Msg.dvMsgBox.offsetWidth)/2)+'px';
}
}
msg.css
view plaincopy to clipboardprint?
/*Msg*/
#dvMsgBox{display:none;position:absolute;font-size:12px;width:300px;background:transparent url(top-bottom.png) repeat-x;overflow:hidden;z-index:999;}
#dvMsgBox .top{height:24px;background:transparent url(left-corners.png) no-repeat;padding-left:6px;}
#dvMsgBox .top .right{height:100%;background:transparent url(right-corners.png) no-repeat right top;padding-right:6px;}
#dvMsgBox .top .right .title{cursor:move;background:transparent url(top-bottom.png) repeat-x;height:100%;line-height:24px;color:#15428b;vertical-align:middle;font-weight:bold;overflow:hidden;}
#dvMsgBox .body{background:transparent url(left-right.png) repeat-y;padding-left:10px;}
#dvMsgBox .body .right{background:transparent url(left-right.png) repeat-y right;padding-right:2px;}
#dvMsgBox .body .right .ct{background-color:#cddef3 !important;background-color:#cadaec;line-height:20px;vertical-align:middle;width:100%;}
#dvMsgBox .body .right .ct .pro{width:280px;border:solid 1px #6593cf;height:25px;background:#ffffff;line-height:23px;overflow:hidden;}
#dvMsgBox .body .right .ct .pro .bg{width:0%;height:100%;background:#c9dffc;}
#dvMsgBox .bottom{background:transparent url(left-corners.png) no-repeat left bottom;padding-left:6px;}
#dvMsgBox .bottom .right{height:100%;background:transparent url(right-corners.png) no-repeat right bottom;padding-right:6px;}
#dvMsgBox .bottom .right .btn{height:100%;background:transparent url(top-bottom.png) repeat-x left bottom;text-align:center;}
#dvMsgBox .bottom .right .btn input{border:0px;width:70px;height:22px;text-align:center;line-height:22px;vertical-align:middle;cursor:pointer;}
#dvMsgBox .bottom .right .btn input.btn{background:url(btn.gif) no-repeat;}
#dvMsgBox .bottom .right .btn input.btnfocus{background:url(btnfocus.gif) no-repeat;}
#dvMsgBox .icon{width:32px;height:32px;float:left;margin-right:10px;}
#dvMsgBox .error{background:url(icon-error.gif) no-repeat;}
#dvMsgBox .info{background:url(icon-info.gif) no-repeat;}
#dvMsgBox .warning{background:url(icon-warning.gif) no-repeat;}
#dvMsgBox .clear{clear:both;}
#dvMsgBox .height{height:10px;line-height:10px;}
#ShowBolightBox{display:none;-moz-opacity:0.5;filter:alpha(opacity=50);opacity:0.5;background-color:#000000;z-index:100;position:absolute;left:0px;top:0px;}
测试页面及说明
view plaincopy to clipboardprint?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>编程设计网--美化alert，confirm，并实现lightbox效果</title>
<meta id="metaKey" name="Keywords" content="美化alert，confirm，并实现lightbox效果" />
<meta id="metaDes" name="Description" content="美化alert，confirm，并实现lightbox效果" />
<link href="images/msg.css" mce_href="images/msg.css" type="text/css" rel="Stylesheet" />
<mce:script type="text/javascript" src="msg.js" mce_src="msg.js"></mce:script>
<mce:style type="text/css"><!--
body{font-size:14px;}
--></mce:style><style type="text/css" mce_bogus="1"> body{font-size:14px;}
</style>
</head>
<body>
<h4>注意alert，confirm及prompt并不同于系统的，这个是用层模仿的，并不能挂起程序的执行<br />
所以如果需要在确认后执行相关的操作，需要在配置文件中传递回调函数fn<br />
按钮只提供yes和no两个
</h4>
Showbo.Msg.alert：参数（要显示的信息）<br />如 Showbo.Msg.alert('你好！')<hr />
Showbo.Msg.confirm：参数（提示信息<font color="red">，回调函数</font>）<br />如 Showbo.Msg.confirm('确认删除？！',function(btn){alert('你点击的按钮为'+btn);})<hr />
Showbo.Msg.prompt：参数（输入框前的文字，输入框默认值，输入框id<font color="red">，回调函数</font>），
<br />如 Showbo.Msg.prompt(null,null,function(btn){if(btn=='yes')alert('输入的值为\t\t'+Showbo.$('msg_txtInput').value);});<br />如果未指定“输入框id”， 输入框的id默认为'msg_txtInput"<hr />
Showbo.Msg.show：参数（cfg）<br />
<b>cfg:{title:'标题'<br />,msg:'信息内容'<br />,wait:true<br />,icon:'提示图标'<br />,buttons:{yes:'yes按钮显示的文字',no:'no按钮显示的文字'}<br />,width:显示的层宽度<br /><font color="red">,fn:function(btn){回调函数，btn为点击的按钮，可以为yes，no}</font>}</b>
<br />
icon的值为Showbo.Msg.ERROR，Showbo.Msg.INFO，Showbo.Msg.WARNING 这个3个<br />
上面的3个方法其实调用的还是此方法，show方法可以
<hr />
<br />
上面的<font color="red">回调函数中参数只有一个，那就是点了哪个按钮！<b>[yes或者no]</b></font>
<br /><br /><br />测试代码<br /><br />
<input type="button" value="Showbo.Msg.alert" onclick="Showbo.Msg.alert('你好！')"/><br/>
<input type="button" value="Showbo.Msg.confirm" onclick="Showbo.Msg.confirm('确认删除？！',function(btn){alert('你点击的按钮为'+btn);})"/><br/>
<input type="button" value="Showbo.Msg.prompt" onclick="popInput()"/><br/>
<input type="button" value="Showbo.Msg.wait" onclick="Showbo.Msg.wait('正在更新信息...','请等待')"/><br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>21<br/>21
<mce:script type="text/javascript"><!--
function popInput(){
//输入框的id为msg_txtInput
Showbo.Msg.prompt(null,null,null,function(btn){
if(btn=='yes')alert('输入的值为\t\t'+Showbo.$('msg_txtInput').value);
});
}
// --></mce:script><span style="display:none" mce_style="display:none"><mce:script type='text/javascript' src="http://xslt.alexa.com/site_stats/js/t/a?url=http://www.code-design.cn" mce_src="http://xslt.alexa.com/site_stats/js/t/a?url=http://www.code-design.cn"></mce:script></span>
</body>
</html>
var Showbo={author:'showbo',homepage:'http://www.code-design.cn'};
//是否为ie浏览器
Showbo.IsIE=!!document.all;
//ie浏览器版本
Showbo.IEVersion=(function(){if(!Showbo.IsIE)return -1;try{return parseFloat(/msie ([\d\.]+)/i.exec(navigator.userAgent)[1]);}catch(e){return -1;}})();
//按id获取对象
Showbo.$=function(Id,isFrame){var o;if("string"==typeof(Id))o= document.getElementById(Id);else if("object"==typeof(Id))o= Id;else return null;return isFrame?(Showbo.IsIE?frames[Id]:o.contentWindow):o;}
//按标签名称获取对象
//页面的高和宽******************************
Showbo.isStrict=document.compatMode == "CSS1Compat";
Showbo.BodyScale={x:0,y:0,tx:0,ty:0};//（x，y）：当前的浏览器容器大小 （tx，ty）：总的页面滚动宽度和高度
Showbo.getClientHeight=function(){/*if(Showbo.IsIE)*/return Showbo.isStrict ? document.documentElement.clientHeight :document.body.clientHeight;/*else return self.innerHeight;*/}
Showbo.getScrollHeight=function(){var h=!Showbo.isStrict?document.body.scrollHeight:document.documentElement.scrollHeight;return Math.max(h,this.getClientHeight());}
Showbo.getHeight=function(full){return full?this.getScrollHeight():this.getClientHeight();}
Showbo.getClientWidth=function(){/*if(Showbo.IsIE)*/return Showbo.isStrict?document.documentElement.clientWidth:document.body.clientWidth;/*else return self.innerWidth;*/}
Showbo.getScrollWidth=function(){var w=!Showbo.isStrict?document.body.scrollWidth:document.documentElement.scrollWidth;return Math.max(w,this.getClientWidth());}
Showbo.getWidth=function(full){return full?this.getScrollWidth():this.getClientWidth();}
Showbo.initBodyScale=function(){Showbo.BodyScale.x=Showbo.getWidth(false);Showbo.BodyScale.y=Showbo.getHeight(false);Showbo.BodyScale.tx=Showbo.getWidth(true);Showbo.BodyScale.ty=Showbo.getHeight(true);}
//页面的高和宽******************************
Showbo.Msg={
INFO:'info',
ERROR:'error',
WARNING:'warning',
IsInit:false,
timer:null,
dvTitle:null,
dvCT:null,
dvBottom:null,
dvBtns:null,
lightBox:null,
dvMsgBox:null,
defaultWidth:300,
moveProcessbar:function(){
var o=Showbo.$('dvProcessbar'),w=o.style.width;
if(w=='')w=20;
else{
w=parseInt(w)+20;
if(w>100)w=0;
}
o.style.width=w+'%';
},
InitMsg:function(width){
//ie下不按照添加事件的循序来执行，所以要注意在调用alert等方法时要检测是否已经初始化IsInit=true
var ifStr='<iframe src="javascript:false" mce_src="javascript:false" style="position:absolute; visibility:inherit; top:0px;left:0px;width:100%; height:100%; z-index:-1;'
+'filter=\'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)\';"></iframe>',
html='<div class="top"><div class="right"><div class="title" id="dvMsgTitle"></div></div></div>'+
'<div class="body"><div class="right"><div class="ct" id="dvMsgCT"></div></div></div>'+
'<div class="bottom" id="dvMsgBottom"><div class="right"><div class="btn" id="dvMsgBtns"></div></div></div>';
this.dvMsgBox=document.createElement("div");
this.dvMsgBox.id="dvMsgBox";
this.dvMsgBox.innerHTML+=html;
document.body.appendChild(this.dvMsgBox);
this.lightBox=document.createElement("div");
this.lightBox.id="ShowBolightBox";
document.body.appendChild(this.lightBox);
if(Showbo.IsIE&&Showbo.IEVersion<7){//加iframe层修正ie6下无法遮盖住select的问题
this.lightBox.innerHTML+=ifStr;
this.dvMsgBox.innerHTML+=ifStr;
}
this.dvBottom=Showbo.$('dvMsgBottom');
this.dvBtns=Showbo.$('dvMsgBtns');
this.dvCT=Showbo.$('dvMsgCT');
this.dvTitle=Showbo.$('dvMsgTitle');
this.IsInit=true;
},
checkDOMLast:function(){//此方法非常关键，要不无法显示弹出窗口。两个对象dvMsgBox和lightBox必须处在body的最后两个节点内
if(document.body.lastChild!=this.lightBox){
document.body.appendChild(this.dvMsgBox);
document.body.appendChild(this.lightBox);
}
},
createBtn:function(p,v,fn){
var btn=document.createElement("input");
btn.type="button";
btn.className='btn';
btn.value=v;
btn.onmouseover=function(){this.className='btnfocus';}
btn.onmouseout=function(){this.className='btn';}
btn.onclick=function(){
Showbo.Msg.hide();
if(fn)fn(p);
}
return btn;
},
alert:function(msg){
this.show({buttons:{yes:'确认'},msg:msg});
},
confirm:function(msg,fn){
//fn为回调函数，参数和show方法的一致
this.show({buttons:{yes:'确认',no:'取消'},msg:msg,title:'提示',fn:fn});
},
prompt:function(labelWord,defaultValue,txtId,fn){
if(!labelWord)labelWord='请输入：';
if(!defaultValue)defaultValue="";
if(!txtId)txtId="msg_txtInput";
this.show({title:'输入提示',msg:labelWord+'<input type="text" id="'+txtId+'" style="width:200px" value="'+defaultValue+'"/>',buttons:{yes:'确认',no:'取消'},fn:fn});
},
wait:function(msg,title){
if(!msg)msg='正在处理..';
this.show({title:title,msg:msg,wait:true});
},
show:function(cfg){
//cfg:{title:'',msg:'',wait:true,icon:'默认为信息',buttons:{yes:'',no:''},fn:function(btn){回调函数,btn为点击的按钮，可以为yes，no},width:显示层的宽}
//如果是等待则wait后面的配置不需要了。。
if(!cfg)throw("没有指定配置文件！");
//添加窗体大小改变监听
if(Showbo.IsIE)window.attachEvent("onresize",this.onResize);
else window.addEventListener("resize",this.onResize,false);
if(!this.IsInit)this.InitMsg();//初始化dom对象
else this.checkDOMLast();//检查是否在最后
//检查是否要指定宽，默认为300
if(cfg.width)this.defaultWidth=cfg.width;
this.dvMsgBox.style.width=this.defaultWidth+'px';
//可以直接使用show方法停止为进度条的窗口
if(this.timer){clearInterval(this.timer);this.timer=null;}
this.dvTitle.innerHTML='';
if(cfg.title)this.dvTitle.innerHTML=cfg.title;
this.dvCT.innerHTML='';
if(cfg.wait){
if(cfg.msg)this.dvCT.innerHTML=cfg.msg;
this.dvCT.innerHTML+='<div class="pro"><div class="bg" id="dvProcessbar"></div></div>';
this.dvBtns.innerHTML='';
this.dvBottom.style.height='10px';
this.timer=setInterval(function(){Showbo.Msg.moveProcessbar();},1000);
}
else{
//if(!cfg.icon)cfg.icon=Showbo.Msg.INFO;
if(!cfg.buttons||(!cfg.buttons.yes&&!cfg.buttons.no)){
cfg.buttons={yes:'确定'};
}
if(cfg.icon)this.dvCT.innerHTML='<div class="icon '+cfg.icon+'"></div>';
if(cfg.msg)this.dvCT.innerHTML+=cfg.msg+'<div class="clear"></div>';
this.dvBottom.style.height='45px';
this.dvBtns.innerHTML='<div class="height"></div>';
if(cfg.buttons.yes){
this.dvBtns.appendChild(this.createBtn('yes',cfg.buttons.yes,cfg.fn));
if(cfg.buttons.no)this.dvBtns.appendChild(document.createTextNode(' '));
}
if(cfg.buttons.no)this.dvBtns.appendChild(this.createBtn('no',cfg.buttons.no,cfg.fn));
}
Showbo.initBodyScale();
this.dvMsgBox.style.display='block';
this.lightBox.style.display='block';
this.onResize(false);
},
hide:function(){
this.dvMsgBox.style.display='none';
this.lightBox.style.display='none';
if(this.timer){clearInterval(this.timer);this.timer=null;}
if(Showbo.IsIE)window.detachEvent('onresize',this.onResize);
else window.removeEventListener('resize',this.onResize,false);
},
onResize:function(isResize){
if(isResize)Showbo.initBodyScale();
Showbo.Msg.lightBox.style.width=Showbo.BodyScale.tx+'px';
Showbo.Msg.lightBox.style.height=Showbo.BodyScale.ty+'px';
Showbo.Msg.dvMsgBox.style.top=document.documentElement.scrollTop+Math.floor((Showbo.BodyScale.y-Showbo.Msg.dvMsgBox.offsetHeight)/2)+'px';
Showbo.Msg.dvMsgBox.style.left=Math.floor((Showbo.BodyScale.x-Showbo.Msg.dvMsgBox.offsetWidth)/2)+'px';
}
}
msg.css
view plaincopy to clipboardprint?
/*Msg*/
#dvMsgBox{display:none;position:absolute;font-size:12px;width:300px;background:transparent url(top-bottom.png) repeat-x;overflow:hidden;z-index:999;}
#dvMsgBox .top{height:24px;background:transparent url(left-corners.png) no-repeat;padding-left:6px;}
#dvMsgBox .top .right{height:100%;background:transparent url(right-corners.png) no-repeat right top;padding-right:6px;}
#dvMsgBox .top .right .title{cursor:move;background:transparent url(top-bottom.png) repeat-x;height:100%;line-height:24px;color:#15428b;vertical-align:middle;font-weight:bold;overflow:hidden;}
#dvMsgBox .body{background:transparent url(left-right.png) repeat-y;padding-left:10px;}
#dvMsgBox .body .right{background:transparent url(left-right.png) repeat-y right;padding-right:2px;}
#dvMsgBox .body .right .ct{background-color:#cddef3 !important;background-color:#cadaec;line-height:20px;vertical-align:middle;width:100%;}
#dvMsgBox .body .right .ct .pro{width:280px;border:solid 1px #6593cf;height:25px;background:#ffffff;line-height:23px;overflow:hidden;}
#dvMsgBox .body .right .ct .pro .bg{width:0%;height:100%;background:#c9dffc;}
#dvMsgBox .bottom{background:transparent url(left-corners.png) no-repeat left bottom;padding-left:6px;}
#dvMsgBox .bottom .right{height:100%;background:transparent url(right-corners.png) no-repeat right bottom;padding-right:6px;}
#dvMsgBox .bottom .right .btn{height:100%;background:transparent url(top-bottom.png) repeat-x left bottom;text-align:center;}
#dvMsgBox .bottom .right .btn input{border:0px;width:70px;height:22px;text-align:center;line-height:22px;vertical-align:middle;cursor:pointer;}
#dvMsgBox .bottom .right .btn input.btn{background:url(btn.gif) no-repeat;}
#dvMsgBox .bottom .right .btn input.btnfocus{background:url(btnfocus.gif) no-repeat;}
#dvMsgBox .icon{width:32px;height:32px;float:left;margin-right:10px;}
#dvMsgBox .error{background:url(icon-error.gif) no-repeat;}
#dvMsgBox .info{background:url(icon-info.gif) no-repeat;}
#dvMsgBox .warning{background:url(icon-warning.gif) no-repeat;}
#dvMsgBox .clear{clear:both;}
#dvMsgBox .height{height:10px;line-height:10px;}
#ShowBolightBox{display:none;-moz-opacity:0.5;filter:alpha(opacity=50);opacity:0.5;background-color:#000000;z-index:100;position:absolute;left:0px;top:0px;}
测试页面及说明
view plaincopy to clipboardprint?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>编程设计网--美化alert，confirm，并实现lightbox效果</title>
<meta id="metaKey" name="Keywords" content="美化alert，confirm，并实现lightbox效果" />
<meta id="metaDes" name="Description" content="美化alert，confirm，并实现lightbox效果" />
<link href="images/msg.css" mce_href="images/msg.css" type="text/css" rel="Stylesheet" />
<mce:script type="text/javascript" src="msg.js" mce_src="msg.js"></mce:script>
<mce:style type="text/css"><!--
body{font-size:14px;}
--></mce:style><style type="text/css" mce_bogus="1"> body{font-size:14px;}
</style>
</head>
<body>
<h4>注意alert，confirm及prompt并不同于系统的，这个是用层模仿的，并不能挂起程序的执行<br />
所以如果需要在确认后执行相关的操作，需要在配置文件中传递回调函数fn<br />
按钮只提供yes和no两个
</h4>
Showbo.Msg.alert：参数（要显示的信息）<br />如 Showbo.Msg.alert('你好！')<hr />
Showbo.Msg.confirm：参数（提示信息<font color="red">，回调函数</font>）<br />如 Showbo.Msg.confirm('确认删除？！',function(btn){alert('你点击的按钮为'+btn);})<hr />
Showbo.Msg.prompt：参数（输入框前的文字，输入框默认值，输入框id<font color="red">，回调函数</font>），
<br />如 Showbo.Msg.prompt(null,null,function(btn){if(btn=='yes')alert('输入的值为\t\t'+Showbo.$('msg_txtInput').value);});<br />如果未指定“输入框id”， 输入框的id默认为'msg_txtInput"<hr />
Showbo.Msg.show：参数（cfg）<br />
<b>cfg:{title:'标题'<br />,msg:'信息内容'<br />,wait:true<br />,icon:'提示图标'<br />,buttons:{yes:'yes按钮显示的文字',no:'no按钮显示的文字'}<br />,width:显示的层宽度<br /><font color="red">,fn:function(btn){回调函数，btn为点击的按钮，可以为yes，no}</font>}</b>
<br />
icon的值为Showbo.Msg.ERROR，Showbo.Msg.INFO，Showbo.Msg.WARNING 这个3个<br />
上面的3个方法其实调用的还是此方法，show方法可以
<hr />
<br />
上面的<font color="red">回调函数中参数只有一个，那就是点了哪个按钮！<b>[yes或者no]</b></font>
<br /><br /><br />测试代码<br /><br />
<input type="button" value="Showbo.Msg.alert" onclick="Showbo.Msg.alert('你好！')"/><br/>
<input type="button" value="Showbo.Msg.confirm" onclick="Showbo.Msg.confirm('确认删除？！',function(btn){alert('你点击的按钮为'+btn);})"/><br/>
<input type="button" value="Showbo.Msg.prompt" onclick="popInput()"/><br/>
<input type="button" value="Showbo.Msg.wait" onclick="Showbo.Msg.wait('正在更新信息...','请等待')"/><br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>21<br/>21
<mce:script type="text/javascript"><!--
function popInput(){
//输入框的id为msg_txtInput
Showbo.Msg.prompt(null,null,null,function(btn){
if(btn=='yes')alert('输入的值为\t\t'+Showbo.$('msg_txtInput').value);
});
}
// --></mce:script><span style="display:none" mce_style="display:none"><mce:script type='text/javascript' src="http://xslt.alexa.com/site_stats/js/t/a?url=http://www.code-design.cn" mce_src="http://xslt.alexa.com/site_stats/js/t/a?url=http://www.code-design.cn"></mce:script></span>
</body>
</html>
分享到：
发表评论
-
javaScript页面特效
2012-11-01 11:14 775http://www.cnblogs.com/cloudgam ... -
js评估密码强度
2012-04-24 17:36 1102js实现评估密码的强度 <script type=& ... -
js去除空格
2011-06-25 21:32 1206比如方法一： String.proto ... -
多选列表。
2011-06-14 14:15 889<%@ page language="java ... -
dtree生成树（转载）
2011-06-09 11:52 1184dTree是个很方便在页面生成树的 js 控件，如果你下载了， ...
相关推荐
美化js系统函数alert，confirm，prompt，并实现lightbox效果 美化js系统函数alert，confirm，prompt，并实现lightbox效果
基于bootstrap实现的响应式Material Design风格的通用后台管理系统，`zheng`项目所有后台系统都是使用该模块界面作为前端展示。 > zheng-ui 各个子系统前台thymeleaf模板，前端资源模块，使用nginx代理，实现动静...
使用java读excel文件，往excel里面写入数据，并重新生成excel文件
用于alert /confirm /prompt.有助于美化界面。
dreamweaver 与 php &mysql 整合应用 confirm link horizontal looper navigation builder pd on-line html editor rss 2.0 from database http://www.tom-muck.com/extensions/help/ConfirmLinks/ ...
好用，亲测 Manifest-Version: 1.0 MIDlet-Vendor: bijat@SY.Z MIDlet-Version: 4.0.0 ...MicroEdition-Configuration: CLDC-...MIDlet-Delete-Confirm:http://wap.motoly.com MIDlet-Description:http://wap.motoly.com
0 17 * * * wget "http://www.XXXX.com/map/xml.php?confirm=1" 1 17 * * * wget "http://www.XXXX.com/map/html.php?confirm=1" 则每天17点及17点01分定时生成xml地图及html地图 2.写入网站的robots.txt文件中,...
新闻 | 用于客户端非阻塞通知的 JavaScript 库。 Notiflix 是一个 JavaScript 库，用于客户端非阻塞通知、弹出框、加载指示器等，使您的 Web 项目变得更好。 当前版本 3.0.1 网站 文档 ... 模块（演示） ...
演示地址：http://www.planeart.cn/downs/artDialog/ 项目主页：http://code.google.com/p/artdialog/ artDialog2采用全新的UI 功能： 支持锁定屏幕(遮罩)、模拟alert和confirm、多窗口弹出、...
博客地址：http://blog.csdn.net/guoqianqian5812/article/details/74295865
JavaScript弹出框的漂亮，响应快速，可自定义，可访问（WAI-ARIA）替代品。 零依赖性。 :money_bag: :backhand_index_pointing_right: 从v9.x升级到v10.x？ 如果要从v8.x，请先 ！ 如果要从v7.x，请先 ！ 如果要...
Qt 5.9.9 Linux下静态编译的库，支持图形界面，编译出来的图形界面程序通过ldd查看依赖无Qt. 编译环境：Cent 7.6 x64, GCC 4.8.5, lic为...原文链接：https://blog.csdn.net/piaopiaolanghua/article/details/122970018
清除整站下载文件中的冗余代码:tppabs,javascript: if(confirm等2010/01/05 12:29用Teleport pro下载的离线网页文件(整站下载得到)源码中,包含了大量的 < tppabs="http://www.****....
温馨建议: ...0 17 * * * wget "http://www.XXXX.com/map/articlemap.php?confirm=1" 则每天17点定时生成 2.在网站各个页面的底部,添加"网站地图"标签,方便用户点击查看,提升网站档次及用户体验效果,如: ...
对JavaScript中的alert confirm wait 美化,并能返回原来的true false值。
the auto download program file
NULL 博文链接：https://hugang357.iteye.com/blog/761620
onBeforeReqPartialHandler =函数（详细信息）{var message =“ url” + details.url.split（'？'）[0] +“由Comcast拥有。”消息+ =“ \ r您确定要 ant导航到此页面？” return {取消：！confirm（message）}}; ...
自己实现的alert、confirm、prompt弹出框，代码简单易懂，效果个人认为还不错，样式仿效的是Ext的弹出框。希望对大家有用，同时也请大家多多指教！有不足的地方能够指出来！大家共同进步！
Ex4.0共2个压缩包特性，《ext js权威指南》 前 言 第1章 ext js 4开发入门 / 1 1.1 学习ext js必需的基础知识 / 1 1.2 json概述 / 3 1.2.1 认识json / 3 1.2.2 json的结构 / 3 1.2.3 json的例子 / 4 1.2.4 ...