弹出对话框背景变灰问题
http://js.alixixi.com/a/2010092765156.shtml
打开的时候用小窗口，背景变灰后放大，这样的漏洞怎么去改？
[解决办法]
在我的基础上加了你的透明背景。。
<!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=gb2312" /><title>JS最简单的弹出窗口效果http://www.ok22.org</title><style type="text/css">html,body{font-size:12px;margin:0px;height:100%;}#BOX_overlay {background:#666;left:0;position:absolute;top:0;z-index:100;}/**遮罩层的样式**/#layer_box {background:#fff;border:3px solid #000;position:absolute;display:none;z-index:999;width:600px;} /**弹出窗口的样式**/.box_title {background:#FFF;border-bottom:1px solid #DDD;margin:10px 10px 0;padding:0 0 5px 20px;} /**关闭栏目**/.box_title span {font-size:14px;font-weight:bold;}.box_title a {color:#000;position:absolute;right:10px;top:10px;}.box_content{padding:10px;margin:10px;}</style><script>function BOX_show(e,a)//显示{ if (document.getElementById(e) == null) { return; } if (!a) { var selects = document.getElementsByTagName('select'); for (i = 0; i < selects.length; i++) { selects[i].style.visibility = "hidden"; } } BOX_layout(e); window.onresize = function() { BOX_layout(e); } //改变窗体重新调整位置 window.onscroll = function() { BOX_layout(e); } //滚动窗体重新调整位置 document.onkeyup = function(event) { var evt = window.event || event; var code = evt.keyCode ? evt.keyCode : evt.which; //alert(code); if (code == 27) { BOX_remove(e); } }}function BOX_remove(e)//移除{ window.onscroll = null; window.onresize = null; document.getElementById('BOX_overlay').style.display = "none"; document.getElementById(e).style.display = "none"; var selects = document.getElementsByTagName('select'); for (i = 0; i < selects.length; i++) { selects[i].style.visibility = "visible"; }}function BOX_layout(e)//调整位置{ var a = document.getElementById(e); if (document.getElementById('BOX_overlay') == null)//判断是否新建遮掩层 { var overlay = document.createElement("div"); overlay.setAttribute('id', 'BOX_overlay'); //overlay.onclick=function(){BOX_remove(e);}; //a.parentNode.appendChild(overlay); document.body.appendChild(overlay); } document.getElementById('BOX_overlay').style.cssText="filter:alpha(opacity=0);-moz-opacity:0;opacity:0;" showBackground(document.getElementById('BOX_overlay'),50) document.getElementById('BOX_overlay').ondblclick = function() { BOX_remove(e); }; //取客户端左上坐标，宽，高 var scrollLeft = (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); var scrollTop = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); var clientWidth; if (window.innerWidth) { clientWidth = window.innerWidth; //clientWidth = ((Sys.Browser.agent === Sys.Browser.Safari) ? window.innerWidth : Math.min(window.innerWidth, document.documentElement.clientWidth)); } else { clientWidth = document.documentElement.clientWidth; } var clientHeight; if (window.innerHeight) { clientHeight = window.innerHeight; //clientHeight = ((Sys.Browser.agent === Sys.Browser.Safari) ? window.innerHeight : Math.min(window.innerHeight, document.documentElement.clientHeight)); } else { clientHeight = document.documentElement.clientHeight; } var bo = document.getElementById('BOX_overlay'); bo.style.left = scrollLeft + 'px'; bo.style.top = scrollTop + 'px'; bo.style.width ='100%'; bo.style.height = clientHeight + 'px'; bo.style.display =""; //Popup窗口定位 a.style.display = 'block' a.style.left = scrollLeft + ((clientWidth - a.offsetWidth) / 2) + 'px'; a.style.top = scrollTop + ((clientHeight - a.offsetHeight) / 2) + 'px';}function showBackground(obj,endInt){ var isIe=(document.all)?true:false; if(isIe) { obj.filters.alpha.opacity+=2; if(obj.filters.alpha.opacity<endInt) { setTimeout(function(){showBackground(obj,endInt)},5); //alert(obj.filters.alpha.opacity); } }else { var al=parseFloat(obj.style.opacity);al+=0.01; obj.style.opacity=al; if(al<(endInt/100)) {setTimeout(function(){showBackground(obj,endInt)},5);} }}</script></head><body><a href="javascript:BOX_show('layer_box');">点击弹出窗口</a><div id="layer_box"> <div class="box_title"><span>弹出窗口标题</span><a onclick="BOX_remove('layer_box')" href="javascript:void(0)">关闭</a></div> <div class="box_content">弹出窗口内容</div></div></body></html>
[解决办法]
你那段代码很乱，我修改了一些细节，你慢慢体会一下吧
<!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><title>网页中弹出小窗口,页面背景逐渐变为半透明</title><style>html,body{font-size:12px;margin:0px;height:100%;}.mesWindow{border:#666 1px solid;background:#fff;}.mesWindowTop{border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px;}.mesWindowContent{margin:4px;font-size:12px;}.mesWindow .close{height:15px;width:28px;border:none;cursor:pointer;text-decoration:underline;background:#fff}</style><script>var isIe=(document.all)?true:false;//设置select的可见状态function setSelectState(state){var objl=document.getElementsByTagName('select');for(var i=0;i<objl.length;i++){objl[i].style.visibility=state;}}function mousePosition(ev){if(ev.pageX || ev.pageY){return {x:ev.pageX, y:ev.pageY};}return {x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop};}//弹出方法function showMessageBox(wTitle,content,pos,wWidth,wHeight){closeWindow();var bWidth=parseInt(document.documentElement.scrollWidth);var bHeight=parseInt(document.documentElement.scrollHeight);if(isIe){setSelectState('hidden');}var back=document.createElement("div");back.id="back";var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;";styleStr+=(isIe)?"filter:alpha(opacity=0);":"opacity:0;";back.style.cssText=styleStr;document.body.appendChild(back);showBackground(back,50);var mesW=document.createElement("div");mesW.id="mesWindow";mesW.className="mesWindow";mesW.innerHTML="<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+wTitle+"</td><td style='width:1px;'><input type='button' onclick='closeWindow();' title='关闭窗口' class='close' value='关闭' /></td></tr></table></div><div class='mesWindowContent' id='mesWindowContent'>"+content+"</div><div class='mesWindowBottom'></div>";styleStr="left:"+((bWidth - wWidth) / 2)+"px;top:"+((bHeight - wHeight) / 2)+"px;position:absolute;width:"+wWidth+"px;height:" + wHeight + "px;";mesW.style.cssText=styleStr;document.body.appendChild(mesW);}//让背景渐渐变暗function showBackground(obj,endInt){if(isIe){obj.filters.alpha.opacity+=5;if(obj.filters.alpha.opacity<endInt){setTimeout(function(){showBackground(obj,endInt)},5);}}else{var al=parseFloat(obj.style.opacity);al+=0.01;obj.style.opacity=al;if(al<(endInt/100)){setTimeout(function(){showBackground(obj,endInt)},5);}}}//关闭窗口function closeWindow(){if(document.getElementById('back')!=null){document.getElementById('back').parentNode.removeChild(document.getElementById('back'));}if(document.getElementById('mesWindow')!=null){document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));}if(isIe){setSelectState('');}}//调整窗口大小function resizeWindow(ev){ if(document.getElementById('back')) { var wWidth = 500; var wHeight = 100; var bWidth = parseInt(document.documentElement.scrollWidth); var bHeight = parseInt(document.documentElement.scrollHeight); var back = document.getElementById('back'); back.style.width = bWidth + "px"; back.style.height = bHeight + "px"; var mesW = document.getElementById('mesWindow'); mesW.style.left = ((bWidth - wWidth) / 2) + "px"; mesW.style.top = ((bHeight - wHeight) / 2) + "px"; }}//测试弹出function testMessageBox(ev){var objPos = mousePosition(ev);messContent="<div style='padding:20px 0 20px 0;text-align:center'>消息正文</div>";showMessageBox('窗口标题',messContent,objPos,500, 100);}</script></head><body onresize="resizeWindow(event)"><div style="padding-top:20%"><div style="text-align:center";><a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div></div></body></html>