Model 蒙版

最新推荐文章于 2023-03-06 22:38:14 发布

Rocke369

最新推荐文章于 2023-03-06 22:38:14 发布

阅读量115

点赞数

分类专栏：组件源码

组件源码专栏收录该内容

13 篇文章 0 订阅

订阅专栏

蒙版

Add HTML


<div class="container">
    <button onclick="showModel()">弹出蒙板</button>
    <div id="myModel" onclick="closeModel()">
        <div class="model-content">
            <p>你好啊,我是内容~~</p>
            <p>
                <button id="closeModel" onclick="closeModel()">关闭</button>
            </p>
        </div>
    </div>
</div>

Add CSS

        .container {
            width: 900px;
            margin: 50px auto;
            text-align: center;
        }

        #myModel {
            position: absolute;
            top: 0;
            left: 0;
            display: none;
            background-color: rgba(9, 9, 9, 0.63);
            width: 100%;
            height: 100%;
            z-index: 1000;
        }

        .model-content {
            width: 50%;
            text-align: center;
            background: #ffffff;
            border-radius: 6px;
            margin: 100px auto;
            line-height: 30px;
            z-index: 10001;
        }

Add JavaScript/jQuery

    function showModel() {
        document.getElementById('myModel').style.display = 'block';
    }
    function closeModel() {
        document.getElementById('myModel').style.display = 'none';
    }