JS如何控制弹出层时网页背景半透明黑色

这是一个简单的弹出层 JS文件 求助 如何控制弹出时网页背景半透明黑色 ，关闭后恢复正常
var time_out = 20000;
function log_start()
{
window.yezi.style.visibility="visible";
window.setTimeout( "real_log_start()", time_out ); 
return false;
}
function real_log_start()
{
window.yezi.style.display="none";
}

解决方案 »

  1.   

    这类代码很多，自己动手写一段遮罩层的代码可以实现，此方法不推荐。
    一般利用现有插件如jquery的blockUI就能很好的实现。
      

  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=gb2312" />
    <title>弹出层</title>
    <script language="javascript">
    function showAlert(w, h){
    var bgdiv = document.createElement("div");
    var iWidth = document.documentElement.clientWidth; 
    var iHeight = document.documentElement.clientHeight;
    bgdiv.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:tansparent;z-index:101;";
    var msgDiv = document.createElement("div");
    msgDiv.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:1px solid white;background-color:#C0C0C0;padding:1px;line-height:22px;z-index:102;";
    var btn = document.createElement("button");
    btn.innerHTML = "关闭";
    btn.onclick = function(){
    document.body.removeChild(bgdiv); 
    document.body.removeChild(msgDiv); 
    }
    msgDiv.appendChild(btn);
    document.body.appendChild(bgdiv);
    document.body.appendChild(msgDiv);
    } 
    </script>
    一个简单的例子，做个参考吧
    </head>
    <body>
    <p>弹出层弹出层弹出层<p>
    <input type="button" value="哈哈" onclick="showAlert(300,200);" />
    </body>
    </html>
      

  3.   

    代码copy过去就行了！
    <html>
    <head>
    <style>
    a:link{text-decoration:none}
     .black_overlay{ 
                display: none; 
                position: absolute; 
                top: 0%; 
                left: 0%; 
                width: 100%; 
                height: 100%; 
                background-color: black; 
                z-index:1001; 
                -moz-opacity: 0.8; 
                opacity:.80; 
                filter: alpha(opacity=35); 
            } 
            .white_content { 
                display: none; 
                position: absolute; 
                top: 25%; 
                left: 25%; 
                width: 55%; 
                height: 55%; 
                padding: 20px;  
                background-image:url(http://www.aosae.com/upLoad/Pro/2011428103834687.jpg);
                z-index:1002; 
                overflow: auto; 
            } 
    </style>
    </head>
    <script language="JavaScript" type="text/JavaScript">
    function index()
    {
    document.getElementById("light").style.display="block";
    document.getElementById("fade").style.display="block";
    }
    function never()
    {
    document.getElementById("light").style.display="none";
    document.getElementById("fade").style.display="none";
    }
    </Script>
    <body>
    <p><a href = "javascript:void(0)"><img src="用户头像.jpg" onClick="index()"></a></p>
    <div id="light" class="white_content"><a "href = "javascript:void(0)" onclick="never()">
    <b>关闭图片</b><a/></div>
    <div id="fade" class="black_overlay"></div>
    </body>
    </html>