CSS实现带遮罩层可关闭的弹窗效果
发布时间：2020-03-09 14:45:19 作者：[子善] 
我要评论
我要评论这篇文章主要介绍了CSS实现带遮罩层可关闭的弹窗效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
实际开发中常常少不了使用弹窗，在学习css3的时候我发现可以通过纯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>
效果如下图片所示
知识点补充：
点击遮罩层的背景关闭遮罩层
在模仿华为官方网页的练习当中我发现华为官网中有一个遮罩层是随便点击遮罩层的背景也能关闭掉遮罩层，但唯独点击内容区域不会关闭掉遮罩层。于是我开始模仿这个写案例，连内容也一模一样（因为这个练习就是要写出和华为关一样的效果或则比它更好的效果），一开始我是这样子写的（图1）
图1
class=Select_Region_bj 我给了一个灰色半透明的背景样式，后来在Javascript中写onclick事件无论这么写，点击内容区也是会关闭掉遮罩层。我百思不得其解到底怎么样写才能点击内容区不会关闭遮罩层，后来下课期间我看见我同学他写的带能点击内容区不会关闭遮罩层。我问他你是这么写的，他告诉我：“把他们分离就可以的了。”我思考了一会，脑补：分离？怎么分离？补着补着补着就补出了背景和内容区分离。分离写（图2）
图2
把背景层和内容区分开来写，不要在背景层中包裹内容，这样子点击内容区就不会关闭掉遮罩层了！
到此这篇关于CSS实现带遮罩层可关闭的弹窗效果的文章就介绍到这了,更多相关CSS遮罩层弹窗内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
使用CSS content的attr实现鼠标悬浮提示（tooltip）效果
这篇文章主要介绍了使用CSS content的attr实现鼠标悬浮提示（tooltip）效果,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
本文通过实例代码给大家介绍了CSS实现鼠标悬浮无限向下级展示的实例代码，需要的朋友参考下吧2017-09-07- 昨天写样式遇到个问题，如何让鼠标悬浮DIV后，显示DIV外的按钮，可以点击到按钮。下面通过本文给大家分享CSS鼠标悬浮DIV后显示DIV外的按钮解决方法，感兴趣的朋友一起看看2017-08-26
使用了CSS3的animation、transform、transition制作了一个动画导航效果，其中利用了Ligature Icon UI制作了导航中的ICON图标,需要了解的朋友可以参考下2012-12-27
这篇文章主要介绍了css实现缕空遮罩层的示例代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习2020-06-03
这篇文章主要介绍了css3遮罩层镂空效果的多种实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学2020-05-11
这篇文章主要介绍了CSS实现鼠标移至图片上显示遮罩层效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2019-11-20
这篇文章主要介绍了CSS 鼠标悬浮在图片上添加遮罩层效果的实现,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-12-17
最新评论