您现在的位置:首页 >> 前端 >> 内容

弹出一个窗口后,后面的层不可操作(代码问题)

时间:2017/12/25 10:39:02 点击:

  核心提示:弹出一个窗口后,后面的层不可操作(代码问题)htmlheadtitle弹出一个窗口后,后面的层不可操作/titlemeta charset=utf-8scriptfunction show()//显示...

弹出一个窗口后,后面的层不可操作(代码问题)

<html>
<head>
    <title>弹出一个窗口后,后面的层不可操作</title>
    <meta charset="utf-8">
    <script>
        function show()  //显示隐藏层和弹出层
        {
            var hideobj=document.getElementById("hidebg");
            hidebg.style.display="block";  //显示隐藏层
            hidebg.style.height=document.body.clientHeight+"px";  //设置隐藏层的高度为当前页面高度
            document.getElementById("hidebox").style.display="block";  //显示弹出层
        }
        function hide()  //去除隐藏层和弹出层
        {
            document.getElementById("hidebg").style.display="none";
            document.getElementById("hidebox").style.display="none";
        }
    </script>
    <style>
        body { margin:0px;padding:0px;text-align: center;}
        #hidebg { position:absolute;left:0px;top:0px;
            background-color:#000;
            width:100%;  /*宽度设置为100%,这样才能使隐藏背景层覆盖原页面*/
            filter:alpha(opacity=60);  /*设置透明度为60%*/
            opacity:0.3;  /*非IE浏览器下设置透明度为60%*/
            display:none; /* https://www.jb51.net */
            z-Index:2;}
        #hidebox { position:absolute;width:400px;height:300px;top:200px;left:30%;background-color:#fff;display:none;cursor:pointer;z-Index:3;}
        #content { text-align:center;cursor:pointer;z-Index:1;}
    </style>
</head>
<body>
<p id="hidebg"></p>
<p id="hidebox" onClick="hide();">点击关闭</p>
<p id="content" onClick="show();">点击试试</p>
</body>
</html>

作者:网络 来源:ls11206238