Fork me on GitHub

CSS实现模态框

什么是模态框？

百度百科:

模态对话框（Modal Dialogue Box，又叫做模式对话框），是指在用户想要对对话框以外的应用程序进行操作时，必须首先对该对话框进行响应。 如单击【确定】或【取消】按钮等将该对话框关闭。 一般来说，Windows应用程序中，对话框分为模态对话框和非模态对话框两种。

如何实现

这里主要使用了position的固定定位。
代码如下：
html结构

<body>
    <header class="top-banner">
        <div class="top-banner-inner">
            <p>
                Find out what's going on at Wombat Conffee each
                month.Sign up for out newsletter:
                <!-- 触发弹窗的按钮 -->
                <button id="open">Sign up</button>
            </p>
        </div>
    </header>
    <div class="modal" id="modal">
        <!-- 模态框后面遮挡网页内容的“蒙层” -->
        <div class="modal-backdrop"></div>
        <div class="modal-body">
            <button class="modal-close" id="close">close</button>
            <h2>Wombat Newssletter</h2>
            <p>Sign up for out monthly newsletter. No spam.
                We promise!
            </p>
            <form >
                <p>
                    <label for="email">Email address:</label>
                    <input type="text" name="email" />
                </p>
                <p><button type="submit">Submit</button></p>
            </form>
        </div>
    </div>
</body>

css部分

<style>
    body {
            font-family: Arial, Helvetica, sans-serif;
            min-height: 200vh; /* 设置网页高度，让页面出现滑动条（为了演示） */
            margin: 0;
        }

        button {
            padding: 0.5em 0.7em;
            border: 1px solid #8d8d8d;
            background-color: white;
            font-size: 1em;
            border-radius: .5em;
            cursor: pointer;
        }
        .top-banner {
            padding: 1em 0;
            background-color: #ffd698;
        }
        .top-banner-inner {
            width: 80%;
            max-width: 1000px;
            margin: 0 auto;
        }
        .modal {
            /* 默认隐藏模态框。当要打开模态框的时候，JS会设置display: block */
            display: none;
        }
        .modal-backdrop {
            /* 当打开模态框时，用半透明的蒙层遮挡网页剩余内容 */
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.5);
        }
        .modal-body {
            /* 给模态框的主体定位 */
            position: fixed;
            top: 3em;
            bottom: 3em;
            right: 20%;
            left: 20%;
            padding: 2em 3em;
            background-color: white;
            overflow: auto;
        }
</style>

js部分：

<script>
        var button = document.getElementById('open');
        var close = document.getElementById('close');
        var modal = document.getElementById('modal');

        button.addEventListener('click', function(event){
            event.preventDefault();
            modal.style.display = 'block';
        });

        close.addEventListener('click', function (event){
            event.preventDefault();
            modal.style.display = 'none';
        });
    </script>

显示效果

modalbox.gif

调整关闭按钮

现在需要把关闭按钮的位置放置在模态框的右上角，可以利用position的绝对定位，绝对定位absolute是对于父级元素的。如果祖先元素都没有定位，那么绝对定位的元素会基于初始包含块（initial containing block）来定位。初始包含块跟视口一样大，固定在网页的顶部。

在上面的样式表中添加如下代码：

<style>
    .modal-close {
            position:absolute;
            top: 0.3em;
            right: 0.3em;
            padding: 0.3em;
        }
</style>

用一个×替换Close按钮

.modal-close {
    position: absolute;
    top: 0.3em;
    right: 0.3em;
    padding: 0.3em;
    /* 让按钮变成一个小方形 */
    font-size: 2em;
    height: 1em;
    width: 1em;
    /* 让元素里的文字溢出并隐藏 */
    text-indent: 10em;
    overflow: hidden;
    border: 0;
}
.modal-close::after{
    position: absolute;
    line-height: 0.5;
    top: 0.2em;
    left: 0.1em;
    text-indent: 0;
    content:"\00d7"
}

展示效果

modalbox1.jpg

posted @ 2022-09-22 10:56  tiger_yam  阅读(870)  评论(0)  编辑  收藏  举报