遮罩层简单实现 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>遮罩层</title>
</head>

<body>
    <center>
        <div>
            <input type="button" value="go" onclick="show()">
        </div>
        <div id="alert" style="display:none;">
            <form>
                登录
                <input type="text">
                <input type="password">
                <input type="submit" value="login">
            </form>
        </div>
    </center>
    <script>
    function show() {
        var alertPart = document.getElementById("alert");
        alertPart.style.display = "block";
        alertPart.style.position = "absolute";
        alertPart.style.top = "50%";
        alertPart.style.left = "50%";
        alertPart.style.marginTop = "-75px";
        alertPart.style.marginLeft = "-150px";
        alertPart.style.background = "cyan";
        alertPart.style.width = "300px";
        alertPart.style.height = "200px";
        alertPart.style.zIndex = "501";

        var mybg = document.createElement("div");
        mybg.setAttribute("id", "mybg");
        mybg.style.background = "#000";
        mybg.style.width = "100%";
        mybg.style.height = "100%";
        mybg.style.position = "absolute";
        mybg.style.top = "0";
        mybg.style.left = "0";
        mybg.style.zIndex = "500";
        mybg.style.opacity = "0.3";
        mybg.style.filter = "Alpha(opacity=30)";
        document.body.appendChild(mybg);

        document.body.style.overflow = "hidden";
    }
    </script>
</body>

</html>

 

posted @ 2016-10-10 23:28  Yvanblog  阅读(179)  评论(0)    收藏  举报