弹窗遮罩层

<style type="text/css">
        #wrap {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            position: fixed;
            top: 0;
            left: 0;
            display: none;
        }
        
        #main {
            width: 400px;
            height: 400px;
            background: white;
            border-radius: 10px;
position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
        }
        
        #close {
            position: absolute;
            right: 10px;
            top: 10px;
            /*cursor
            pointer:让鼠标指针停留时变更鼠标样式为小手指
            progress:让鼠标指针停留时变更鼠标样式为正在加载中*/
            cursor: pointer;
        }
    </style>
</head>

<body>
    <button onclick="showAlert()">点击我</button>
    <div id="wrap">
        <div id="main">
            <div id="close" onclick="hideAlert()">
                X
            </div>
        </div>
    </div>
</body>
<script>
    var wrap = document.getElementById("wrap");

    function showAlert() {
        wrap.style.display = "block"
    }

    function hideAlert() {
        wrap.style.display = "none"
    }
</script>
posted @ 2020-09-12 12:30  三个木石  阅读(166)  评论(0)    收藏  举报