简易遮罩层效果实现-优快云博客

Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>一个简单的遮罩层效果</title>
    <script language="javascript">
    function openwin() {
        if(document.getElementById("mywinOut") == undefined) {
            var winOut = document.createElement("div");
            winOut.setAttribute("id","mywinOut");
            winOut.style.zIndex="98";
            winOut.style.left = "0";
            winOut.style.top = "0";
            winOut.style.width = document.body.scrollWidth;
            winOut.style.height = document.body.scrollHeight;
            winOut.style.position = "absolute";
            winOut.style.background = "#cccccc";
            winOut.style.filter="alpha(opacity=60)";
            winOut.style.opacity="0.4";
            document.body.appendChild(winOut);

            var winIn = document.createElement("div");
            winIn.setAttribute("id","mywinIn");
            winIn.style.zIndex="99";
            winIn.style.left = document.body.clientWidth/2 - 200;
            winIn.style.top = document.body.scrollTop + 150;
            winIn.style.width = 400+"px";
            winIn.style.height = 400+"px";
            winIn.style.position = "absolute";
            winIn.style.background = "#ffffff";
            winIn.innerHTML="<center><br><br><br><input type='button' onclick='closewin()' value='关闭'/></center>";
            document.body.appendChild(winIn);
        } else {
            document.getElementById("mywinOut").style.display = "block";
            document.getElementById("mywinIn").style.display = "block";
        }
    }

    function closewin() {
        document.getElementById("mywinOut").style.display = "none";
        document.getElementById("mywinIn").style.display = "none";
    }
    </script>
</head>

<body>
<center>
<input type="button" onclick="openwin()" value="弹出"/>
<div style="height=1000px"></div>
</center>
</body>
</html>

演示

转载于:https://www.cnblogs.com/arix04/archive/2009/06/17/1505224.html