一个简单的模态框modal可以在html和vue里都可以使用

最新推荐文章于 2024-12-26 09:15:00 发布

原创最新推荐文章于 2024-12-26 09:15:00 发布 · 741 阅读

0 ·

CC 4.0 BY-SA版权

前端开发专栏收录该内容

601 篇文章

订阅专栏

本文详细介绍了一个模态框的设计与实现过程，包括HTML结构、CSS样式和JS控制逻辑，展示了如何创建一个遮罩效果的模态窗口，用于网页上的临时信息展示或交互。

模态框其实就是一个遮罩

html：

        <div id="modal">
            <div class="win">
            <p>正在搜索中，稍安勿躁......</p>
            </div>
        </div>

css：



#modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    display: none;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.1)
}

#modal .win {
    position: relative;
    margin: 300px auto;
    width: 80%;
    height: 90pt;
    background-color: rgba(0,0,0,.5)
}


.win p {
    font-size: 20px;
    color: white;
    padding-top: 50px;
    text-align: center
}

js：

        showModal: function () {
            document.getElementById("modal").style.display="block";
        }
        ,
        hideModal: function () {
            document.getElementById("modal").style.display="none";
        }