CSS弹窗实现增加遮罩层的方法

发布时间：2023-12-27 10:42:44 所属栏目：语言来源：DaWei

导读： CSS弹窗怎样实现增加遮罩层，方法是什么？在实际的项目中，对于弹窗的使用是很常见的，这篇我们主要来看用CSS3实现带遮罩层的弹窗效果，这里需要使用到，target伪类，::before 、::after伪元

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

实现弹窗的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*关闭弹窗*/
.popBox {
display: none;
}

/*打开弹窗*/
.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;
}
</style>
</head>
<body>
<ul>
<li><a href="#example1">案例1</a></li>
<li><a href="#example2">案例2</a></li>
</ul>

<article class="popBox" id="example1">
<div class="con">
<a href="#" class="close"></a>

<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>

点击遮罩层的背景关闭遮罩层

在模仿华为官方网页的练习当中我发现华为官网中有一个遮罩层是随便点击遮罩层的背景也能关闭掉遮罩层，但唯独点击内容区域不会关闭掉遮罩层。

class=Select_Region_bj 我给了一个灰色半透明的背景样式，后来在Javascript中写onclick事件无论这么写，点击内容区也是会关闭掉遮罩层。我百思不得其解到底怎么样写才能点击内容区不会关闭遮罩层，后来下课期间我看见我同学他写的带能点击内容区不会关闭遮罩层。

把背景层和内容区分开来写，不要在背景层中包裹内容，这样子点击内容区就不会关闭掉遮罩层了！

以上就是CSS弹窗实现增加遮罩层的介绍，本文只是提供了一种CSS弹窗实现思路，代码仅供参考，需要的朋友可以了解看看，希望对大家学习有帮助。

（编辑：宁德站长网）

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