在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
实际开发中常常少不了使用弹窗,在学习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
图2 把背景层和内容区分开来写,不要在背景层中包裹内容,这样子点击内容区就不会关闭掉遮罩层了! 到此这篇关于CSS实现带遮罩层可关闭的弹窗效果的文章就介绍到这了,更多相关CSS遮罩层弹窗内容请搜索极客世界以前的文章或继续浏览下面的相关文章,希望大家以后多多支持极客世界! |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论