自定义提示框

来源：互联网发布：华为交换机禁止mac 编辑：程序博客网时间：2024/05/17 01:59

--css

/*自定义提示框样式*/
.mesWindow{border:#ccc solid 1px;background:#fff;height:auto;line-height:20px;border-radius: 5px;}
.mesWindowTop{border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px; height:22px; line-height:22px;}
.mesWindowContent{margin:4px;padding-left:5px;font-size:12px; height:auto;background:#fff;min-height:40px;line-height:20px;}
.mesWindowBottom{height:22px; line-height:22px;text-align:center;border-top:#eee 1px solid;}
.mesWindow .close{height:15px;width:40px;border:none;cursor:pointer;text-decoration:underline;background:#fff;text-align:right;}
img{border:0px}
.an{width:248px;padding-left:130px;margin-top: 10px;}
.anniu{float:left;width:82px;height:29px;margin-right: 40px;display:inline;}
.out{float:right;}
.div_testList{width:488px;height:302px; background-color:#fff;display:none;}
.div_testList td{background:#fff;font-size:14px; font-family:'微软雅黑', '宋体'; }
.div_testList td input{width: 200px; line-height:20px; height:20px;}
.leftTd{width:100px; text-align:right;}

function __messageBox()

{
var isIe=!!document.all;
var obj = this;
var backDiv = null;
var messageDiv = null;
window._msgZindex = window._msgZindex || 200000;
//弹出提示框
this.showMessageBox=function (wTitle,content,wWidth,type,confirmFun,cancelFun)
{
type = type||0;
obj.showBackgroundDiv();
if(typeof(content)=='string'){
messageDiv=document.createElement("div");
messageDiv.className="mesWindow";
var html = "<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+wTitle+"</td><td style='width:1px;'><input type='button' class='close' value='关闭' /></td></tr></table></div><div class='mesWindowContent' >"+content+"</div>";
if(type>0){html+="<div class='mesWindowBottom'><a href='javascript:void(0)'>确定</a>"; if(type>1){html+="   <a href='javascript:void(0)'>取消</a>";} html+="</div>"; }
html+="<div class='clear'></div>";
messageDiv.innerHTML=html;
styleStr="left:"+(obj.getClientWidth()- wWidth)/2+"px;position:absolute;width:"+wWidth+"px;z-index:"+window._msgZindex++ +";top:" +((obj.getClientHeight()-100)/2+obj.getScrollTop()) +'px';
messageDiv.style.cssText=styleStr;
document.body.appendChild(messageDiv);
setTimeout(function(){
var divList =messageDiv.getElementsByTagName('div') ;
divList[0].getElementsByTagName('input')[0].onclick=function(){obj.closeWindow();if(type>1 && cancelFun && cancelFun !=null)cancelFun();};
if(type>0){
var aList= divList[divList.length-2].getElementsByTagName('a');
aList[0].onclick=function(){obj.closeWindow();if(confirmFun && confirmFun !=null)confirmFun();};
if(type>1){ aList[1].onclick=function(){obj.closeWindow();if(cancelFun && cancelFun !=null)cancelFun();};}
}
},50);
}else {
messageDiv=content;isHide = true;
messageDiv.style.position="absolute";
messageDiv.style.zIndex=window._msgZindex++ ;
messageDiv.style.display="block";
obj.setDivSize();
if(isIe){
var slcList = messageDiv.getElementsByTagName('select');
for(var i=0;i<slcList.length;i++)
{
slcList[i].style.visibility="";
}
}
}
};
this.setDivSize=function(){
if(backDiv!=null)
{
backDiv.style.width = document.documentElement.scrollWidth ;
backDiv.style.height=document.documentElement.scrollHeight;
}
if(messageDiv!=null){
messageDiv.style.top=(( obj.getClientHeight() - messageDiv.offsetHeight)/2 + obj.getScrollTop()) +'px';
messageDiv.style.left=(( obj.getClientWidth() - messageDiv.offsetWidth)/2 ) +'px';
}
}
this.setMessageBoxTop=function(p)
{
if(messageDiv==null){return;}
var toTop =toTop = ( obj.getClientHeight() - messageDiv.offsetHeight)/2 + obj.getScrollTop();
var top = parseInt( messageDiv.style.top);
if(top< toTop - p/2 )
{
top+=p;
messageDiv.style.top = (top) +'px';
setTimeout(function(){obj.setMessageBoxTop(p);},2);
}else if(top>toTop +p/2 ){
top-=p;
messageDiv.style.top = (top) +'px';
setTimeout(function(){obj.setMessageBoxTop(p);},2);
}else{
messageDiv.style.top = (toTop) +'px';
}
};
//让背景渐渐变暗
this.showBackground=function(objDiv,endInt)
{
if(isIe)
{
objDiv.filters.alpha.opacity+=5;
if(objDiv.filters.alpha.opacity<endInt)
{
setTimeout(function(){obj.showBackground(objDiv,endInt)},5);
}
}else{
var al=parseFloat(objDiv.style.opacity);al+=0.05;
objDiv.style.opacity=al;
if(al<(endInt/100))
{setTimeout(function(){obj.showBackground(objDiv,endInt)},5);}
}
};
//显示全屏的一个半透明div
this.showBackgroundDiv=function()
{
if(isIe){ obj.setSelectState('hidden');}
backDiv =document.createElement("div");
var bWidth=parseInt(document.documentElement.scrollWidth);
var bHeight=parseInt(document.documentElement.scrollHeight);
var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;z-index:"+window._msgZindex++ ;
styleStr+=(isIe)?";filter:alpha(opacity=0);":";opacity:0;";
backDiv.style.cssText=styleStr;
document.body.appendChild(backDiv);
obj.showBackground(backDiv,50);
};
//关闭窗口是否隐藏div 不隐藏就删除
this.closeWindow=function(isHide)
{
if(backDiv!=null)
{
backDiv.parentNode.removeChild(backDiv);
backDiv = null;
if(isIe){
obj.setSelectState('');
}
}
if(messageDiv!=null)
{ if(isHide)
{
messageDiv.style.display="none";
}else{
messageDiv.parentNode.removeChild(messageDiv);
messageDiv = null;
}
}
};


if(window.addEventListener){
window.addEventListener('scroll', function(e){ obj.setMessageBoxTop(1); },false);
window.addEventListener('resize', function(e){obj.setDivSize(); },false);
}else{
window.attachEvent("onscroll",function(){ obj.setMessageBoxTop(1);});
window.attachEvent("onresize",function(){ obj.setDivSize(); });
}
}
//设置select的可见状态
__messageBox.prototype.setSelectState = function(state)
{
var slcList=document.getElementsByTagName('select');
for(var i=0;i<slcList.length;i++)
{
slcList[i].style.visibility=state;
}
};
/********************
* 取窗口滚动条滚动高度
******************/
__messageBox.prototype.getScrollTop=function ()
{
return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop ;
};


/********************
* 取窗口可视范围的高度
*******************/
__messageBox.prototype.getClientHeight=function()
{
return (navigator.userAgent.toLowerCase().indexOf("opera") != -1)?document.body.clientHeight:document.documentElement.clientHeight;
};
/********************
* 取窗口可视范围的宽度
*******************/
__messageBox.prototype.getClientWidth=function()
{
return (navigator.userAgent.toLowerCase().indexOf("opera") != -1)?document.body.clientWidth:document.documentElement.clientWidth;
};
window.Alert=function(m,t,confirmFun,cancelFun)
{
t= (t&&t!=null&&t!='')?t:"系统消息";
new __messageBox().showMessageBox(t,m,300,1,confirmFun,cancelFun);
}
window.Confirm=function(m,t,confirmFun,cancelFun){
t= (t&&t!=null&&t!='')?t:"系统消息";
new __messageBox().showMessageBox(t,m,300,2,confirmFun,cancelFun);

}

---------------调用

var messContent="<div style='padding:20px 10px 20px 10px;text-align:left;font-family: 宋体; font-size: 14px; color: #616161'>"+'${msg }'+"</div>";
var msg = new __messageBox();
// 弹出提示框
msg.showMessageBox('提示信息',messContent,200);

// 弹出半透明的div
//msg.showBackgroundDiv()

0 0