javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
本文实例讲述了javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法。分享给大家供大家参考。具体分析如下：
这里点击按钮后，弹出一个可关闭的层窗口，随之网页背景变灰，在QQ网站上经常会看到QQ登录的效果，就和这个很类似，代码段基于JavaScript，根据你的情况使用，有时候是用CSS完成的这种功能。
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>弹出一个层，页面变灰</title>
<scriptlanguage="javascript">
functionalertWin(title,msg,w,h){
vartitleheight="23px";//窗口标题高度
varbordercolor="#336699";//提示窗口的边框颜色
vartitlecolor="#FFFFFF";//窗口标题颜色
vartitlebgcolor="#336699";//窗口标题背景色
varbgcolor="#FFFFFF";//提示内容的背景色
variWidth=document.documentElement.clientWidth;
variHeight=document.documentElement.clientHeight;
varbgObj=document.createElement("div");
bgObj.style.cssText="position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max(document.body.clientHeight,iHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:101;";
document.body.appendChild(bgObj);
varmsgObj=document.createElement("div");
msgObj.style.cssText="position:absolute;font:11px'宋体';top:"+(iHeight-h)/2+"px;left:"+(iWidth-w)/2+"px;width:"+w+"px;height:"+h+"px;text-align:center;border:1pxsolid"+bordercolor+";background-color:"+bgcolor+";padding:1px;line-height:22px;z-index:102;";
document.body.appendChild(msgObj);
vartable=document.createElement("table");
msgObj.appendChild(table);
table.style.cssText="margin:0px;border:0px;padding:0px;";
table.cellSpacing=0;
vartr=table.insertRow(-1);
vartitleBar=tr.insertCell(-1);
titleBar.style.cssText="width:100%;height:"+titleheight+"px;text-align:left;padding:3px;margin:0px;font:bold13px'宋体';color:"+titlecolor+";border:1pxsolid"+bordercolor+";cursor:move;background-color:"+titlebgcolor;
titleBar.style.paddingLeft="10px";
titleBar.innerHTML=title;
varmoveX=0;
varmoveY=0;
varmoveTop=0;
varmoveLeft=0;
varmoveable=false;
vardocMouseMoveEvent=document.onmousemove;
vardocMouseUpEvent=document.onmouseup;
titleBar.onmousedown=function(){
varevt=getEvent();
moveable=true;
moveX=evt.clientX;
moveY=evt.clientY;
moveTop=parseInt(msgObj.style.top);
moveLeft=parseInt(msgObj.style.left);
document.onmousemove=function(){
if(moveable){
varevt=getEvent();
varx=moveLeft+evt.clientX-moveX;
vary=moveTop+evt.clientY-moveY;
if(x>0&&(x+w<iWidth)&&y>0&&(y+h<iHeight)){
msgObj.style.left=x+"px";
msgObj.style.top=y+"px";
}
}
};
document.onmouseup=function(){
if(moveable){
document.onmousemove=docMouseMoveEvent;
document.onmouseup=docMouseUpEvent;
moveable=false;
moveX=0;
moveY=0;
moveTop=0;
moveLeft=0;
}
};
}
varcloseBtn=tr.insertCell(-1);
closeBtn.style.cssText="cursor:pointer;padding:2px;background-color:"+titlebgcolor;
closeBtn.innerHTML="<spanstyle='font-size:15pt;color:"+titlecolor+";'>×</span>";
closeBtn.onclick=function(){
document.body.removeChild(bgObj);
document.body.removeChild(msgObj);
}
varmsgBox=table.insertRow(-1).insertCell(-1);
msgBox.style.cssText="font:10pt'宋体';";
msgBox.colSpan=2;
msgBox.innerHTML=msg;
//获得Event对象，用于兼容IE和FireFox
functiongetEvent(){
returnwindow.event||arguments.callee.caller.arguments[0];
}
}
</script>
</head>
<body>
<inputtype="button"value="点这里"
onclick="alertWin('点击弹出可关闭的层窗口，网页变灰',290,208);"/>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。