遮罩层简单实现

最新推荐文章于 2021-03-24 08:54:44 发布

weixin_30265103

最新推荐文章于 2021-03-24 08:54:44 发布

阅读量66

点赞数

原文链接：http://www.cnblogs.com/yangfengitblog/p/5947713.html

版权

<!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>

转载于:https://www.cnblogs.com/yangfengitblog/p/5947713.html

weixin_30265103

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
遮罩层简单实现

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>遮罩层</title></head><body> <center> <di...
复制链接

扫一扫