实际开发中常常少不了使用弹窗，在学习css3的时候我发现可以通过纯css实现带遮罩层可关闭的弹窗。
使用CSS3实现带遮罩层可关闭的弹窗需要用到 :t arg et 伪类 ， :: before 、: :after 伪元素。
实现弹窗的代码：
<!DOCTY PE ht ML >
<html lang="en">
<head>
< ;m eta charset="UTF-8">
<t IT le>Title</title>
<style>
/*关闭弹窗*/
.popBox {
dis play : none;
}
/*打开弹窗*/
.popBox:target {
align -i tems: 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;
h ei ght: 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 hr ef=" # ex am ple1">案例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 typ ical multi-meaning event stat ement t hat people e xp erience in PR oduction 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, rese Arch , and life reference. Case-based t each ing is an effective carrier to convey targeted educational significance to people through cases.</p>
</div>
</article>
</body>
</html>
效果如下图片所示
知识点补充：
点击遮罩层的背景关闭遮罩层
在模仿 华为 官方 网页的练习当中我发现华为官网中有一个遮罩层是随便点击遮罩层的背景也能关闭掉遮罩层，但唯独点击内容区域不会关闭掉遮罩层。于是我 开始 模仿这个写案例，连内容也一模一样（因为这个练习就是要写出和华为关一样的效果或则比它更好的效果），一开始我是这样子写的（图1）
图1
class=Select_Region_bj 我给了一个灰色 半 透明的背景样式，后来在Javascript中写onclick事件无论这么写，点击内容区也是会关闭掉遮罩层。我百思不得其解到底怎么样写才能点击内容区不会关闭遮罩层，后来下课期间我看见我 同学 他写的带能点击内容区不会关闭遮罩层。我问他你是这么写的，他告诉我：[把他们分离就可以的了。]我思考了一会，脑补：分离？怎么分离？补着补着补着就补出了背景和内容区分离。分离写（图2）
图2
把背景层和内容区分开来写，不要在背景层中包裹内容，这样子点击内容区就不会关闭掉遮罩层了！
到此这篇关于CSS实现带遮罩层可关闭的弹窗效果的 文章 就介绍到这了,更多相关CSS遮罩层弹窗内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
总结
以上是 为你收集整理的 CSS实现带遮罩层可关闭的弹窗效果 全部内容，希望文章能够帮你解决 CSS实现带遮罩层可关闭的弹窗效果 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于CSS实现带遮罩层可关闭的弹窗效果的详细内容...