帮我看看这段js如何关闭遮罩层


function show(){
var isIE = (document.all) ? true : false;
var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);
var newbox=document.getElementById("show_info");
newbox.style.zIndex="9999";
newbox.style.display="block"
newbox.style.position = !isIE6 ? "fixed" : "absolute";
newbox.style.top =newbox.style.left = "50%";
newbox.style.marginTop = - newbox.offsetHeight / 2 + "px";
newbox.style.marginLeft = - newbox.offsetWidth / 2 + "px";
var layer=document.createElement("div");
layer.id="layer";
layer.style.width=layer.style.height="100%";
layer.style.position= !isIE6 ? "fixed" : "absolute";
layer.style.top=layer.style.left=0;
layer.style.backgroundColor="#000";
layer.style.zIndex="9998";
layer.style.opacity="0.6";
document.body.appendChild(layer);
var sel=document.getElementsByTagName("select");
for(var i=0;i<sel.length;i++){
sel[i].style.visibility="hidden";
}
function layer_iestyle(){
layer.style.width=Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth)+ "px";
layer.style.height= Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) +"px";
}
function newbox_iestyle(){
newbox.style.marginTop = document.documentElement.scrollTop - newbox.offsetHeight / 2 + "px";
newbox.style.marginLeft = document.documentElement.scrollLeft - newbox.offsetWidth / 2 + "px";
}
if(isIE){layer.style.filter ="alpha(opacity=80)";}
if(isIE6){
layer_iestyle()
newbox_iestyle();
window.attachEvent("onscroll",function(){
newbox_iestyle();
})
window.attachEvent("onresize",layer_iestyle)
} 
layer.onclick=function(){newbox.style.display="none";
layer.style.display="none";for(var i=0;i<sel.length;i++){
sel[i].style.visibility="visible";
}}
}上面这段js实现了一个弹出遮罩层，弹出没问题，关闭的时候需要点弹出层以外的地方才能关闭。我想在弹出层上做一个图片按钮，执行js关闭弹出层，请问这段js如何写？或者如何调用上面的js里的代码？<img class="img" src="images/close.png" alt="关闭" onclick="这里执行函数关闭遮罩层让页面还原" />

解决方案 »

  1.   

    var layer=document.createElement("div");
    定义成全局的layer.parentNode.removeChild(layer); 就可以了
      

  2.   


    <!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>无标题文档</title>
    <script language="javascript">
    function show(){
    var isIE = (document.all) ? true : false;
    var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);
    var newbox=document.getElementById("show_info");
    newbox.style.zIndex="9999";
    newbox.style.display="block"
    newbox.style.position = !isIE6 ? "fixed" : "absolute";
    newbox.style.top =newbox.style.left = "50%";
    newbox.style.marginTop = - newbox.offsetHeight / 2 + "px";
    newbox.style.marginLeft = - newbox.offsetWidth / 2 + "px";
    var layer=document.createElement("div");
    layer.id="layer";
    layer.style.width=layer.style.height="100%";
    layer.style.position= !isIE6 ? "fixed" : "absolute";
    layer.style.top=layer.style.left=0;
    layer.style.backgroundColor="#000";
    layer.style.zIndex="9998";
    layer.style.opacity="0.6";
    document.body.appendChild(layer);
    var sel=document.getElementsByTagName("select");
    for(var i=0;i<sel.length;i++){
    sel[i].style.visibility="hidden";
    }
    function layer_iestyle(){
    layer.style.width=Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth)+ "px";
    layer.style.height= Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) +"px";
    }
    function newbox_iestyle(){
    newbox.style.marginTop = document.documentElement.scrollTop - newbox.offsetHeight / 2 + "px";
    newbox.style.marginLeft = document.documentElement.scrollLeft - newbox.offsetWidth / 2 + "px";
    }
    if(isIE){layer.style.filter ="alpha(opacity=80)";}
    if(isIE6){
    layer_iestyle()
    newbox_iestyle();
    window.attachEvent("onscroll",function(){
    newbox_iestyle();
    })
    window.attachEvent("onresize",layer_iestyle)
    } 
    layer.onclick=function(){newbox.style.display="none";
    layer.style.display="none";for(var i=0;i<sel.length;i++){
    sel[i].style.visibility="visible";
    }}
    }</script>
    <style type="text/css">
    #show_info { background-color:white; width:200px; height:200px}
    </style>
    </head><body>
    <div id="show_info"><img class="img" src="images/close.png" alt="关闭" onclick="layer.click()" /></div>
    <input type="button" name="btn" onclick="show()" value="test" />
    </body>
    </html>
      

  3.   


    <!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>无标题文档</title>
    <script language="javascript">
    function show(){
    var isIE = (document.all) ? true : false;
    var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);
    var newbox=document.getElementById("show_info");
    newbox.style.zIndex="9999";
    newbox.style.display="block"
    newbox.style.position = !isIE6 ? "fixed" : "absolute";
    newbox.style.top =newbox.style.left = "50%";
    newbox.style.marginTop = - newbox.offsetHeight / 2 + "px";
    newbox.style.marginLeft = - newbox.offsetWidth / 2 + "px";
    var layer=document.createElement("div");
    layer.id="layer";
    layer.style.width=layer.style.height="100%";
    layer.style.position= !isIE6 ? "fixed" : "absolute";
    layer.style.top=layer.style.left=0;
    layer.style.backgroundColor="#000";
    layer.style.zIndex="9998";
    layer.style.opacity="0.6";
    document.body.appendChild(layer);
    var sel=document.getElementsByTagName("select");
    for(var i=0;i<sel.length;i++){
    sel[i].style.visibility="hidden";
    }
    function layer_iestyle(){
    layer.style.width=Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth)+ "px";
    layer.style.height= Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) +"px";
    }
    function newbox_iestyle(){
    newbox.style.marginTop = document.documentElement.scrollTop - newbox.offsetHeight / 2 + "px";
    newbox.style.marginLeft = document.documentElement.scrollLeft - newbox.offsetWidth / 2 + "px";
    }
    if(isIE){layer.style.filter ="alpha(opacity=80)";}
    if(isIE6){
    layer_iestyle()
    newbox_iestyle();
    window.attachEvent("onscroll",function(){
    newbox_iestyle();
    })
    window.attachEvent("onresize",layer_iestyle)
    } 
    layer.onclick=function(){newbox.style.display="none";
    layer.style.display="none";for(var i=0;i<sel.length;i++){
    sel[i].style.visibility="visible";
    }}
    }
    function closediv()
    {
    layer.parentNode.removeChild(layer);
    document.getElementById("show_info").style.display = "none";
    }
    </script>
    <style type="text/css">
    #show_info { background-color:white; width:200px; height:200px; display:none}
    </style>
    </head><body>
    <div id="show_info"><img class="img" src="images/close.png" alt="关闭" onclick="closediv()" /></div>
    <input type="button" name="btn" onclick="show()" value="test" />
    </body>
    </html>