CSS弹窗怎样实现添加遮罩层，方法是什么?

发布时间：2022-04-11 16:55:57 所属栏目：语言来源：互联网

导读：CSS弹窗怎样实现增加遮罩层，方法是什么？在实际的项目中，对于弹窗的使用是很常见的，这篇我们主要来看用CSS3实现带遮罩层的弹窗效果，这里需要使用到，target伪类，::before 、::after伪元素。实现代码及效果如下，感兴趣的朋友可以参考。实现弹窗的代码

CSS弹窗怎样实现增加遮罩层，方法是什么？在实际的项目中，对于弹窗的使用是很常见的，这篇我们主要来看用CSS3实现带遮罩层的弹窗效果，这里需要使用到，target伪类，::before 、::after伪元素。实现代码及效果如下，感兴趣的朋友可以参考。

    实现弹窗的代码：

        /*打开弹窗*/
        .popBox:target {
            align-items: center;
            display: flex;
            justify-content: center;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }

        /*设置弹窗内容*/
        .popBox .con {
            background-color: rgba(250, 188, 199, 0.76);
            border-radius: 5px;
            padding: 1.5rem;
            position: relative;
            width: 25rem;
        }

        /*关闭按钮*/
        .popBox .close {
            display: block;
            position: relative;
        }

        .popBox .close::after {
            align-items: center;
            color: white;
            content: "×";
            cursor: pointer;
            background-color: rgba(79, 79, 79, 0.9);
            border-radius: 50%;
            display: flex;
            font-size: 1.25rem;
            justify-content: center;
            position: absolute;
            right: -2.5rem;
            top: -2.5rem;
            height: 2rem;
            width: 2rem;
            z-index: 2;
        }

        /*弹窗遮罩层*/
        .popBox::before {
            content: "";
            cursor: default;
            background-color: rgba(173, 173, 173, 0.66);
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;

        <p>案例，就是人们在生产生活当中所经历的典型的富有多种意义的事件陈述。它是人们所经历的故事当中的有意截取。
案例一般包括三大要素。案例对于人们的学习、研究、生活借鉴等具有重要意义。基于案例的教学是通过案例向人们传递有针对性的教育意义的有效载体。</p>
    </div>
</article>

<article class="popBox" id="example2">
    <div class="con">
        <a href="#" class="close"></a>
        <p>A case is a typical multi-meaning event statement that people experience in production and life.
It is a deliberate interception of the stories people experience. Cases generally include three major elements.
Cases are of great significance to people's learning, research, and life reference. Case-based teaching is an effective
carrier to convey targeted educational significance to people through cases.</p>
    </div>
</article>
</body>
</html>。

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

C++ search_n 函数用法	GDB print和display命
行逻辑链接的顺序表压	回看算法详解