CSS实现带有遮罩层的弹窗效果以及:target选择器的使用方法

最新推荐文章于 2023-03-03 07:40:09 发布

原创

最新推荐文章于 2023-03-03 07:40:09 发布 · 976 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#弹窗 #:target #CSS弹窗

本文介绍了如何利用CSS的:target选择器和HTML结构创建带有遮罩层的弹窗效果。讲解了:target选择器的工作原理，即通过a标签链接到目标元素的锚点，使得目标元素活动。详细阐述了弹窗的实现过程，包括HTML结构的搭建和CSS样式的设置，提供了一个基础的弹窗效果实现。

点击查看效果

:target选择器的使用方法

首先介绍一下:target选择器，作为伪类选择器肯定是在目标元素满足某些条件时才会选择目标元素，大家都知道:hover的条件是鼠标从目标元素上方划过时选中目标元素，那么:target选择器是在目标元素活动时才会选中。
而想要使目标元素活动就要通过a标签链接到目标元素的锚点（name或ID），当点击带有锚点的a标签就可以让目标元素进入活动状态。有些类似于input标签的获取焦点，不过input直接点击就可以获取焦点，而其他元素需要通过锚点。

弹窗实现原理

使用visibility: hidden;将弹窗区域隐藏，再利用:target选择器在点击按钮时选中弹窗区域，将visibility: hidden;覆盖为visibility: visible;这样就实现了弹窗效果。

HTML结构

首先将希望实现弹窗效果的内容嵌套进一个DIV盒子中，嵌套的这个盒子用来实现遮罩层效果。给这个盒子一个ID作为锚点，然后在希望实现点击弹窗的按钮外面添加一个a标签，a标签的URL链接向这个盒子的锚点（也就是ID）。
这样就可以在点击a标签（或button按钮）通过锚点选中弹窗元素从而改变样式。需要说明的是需要在弹窗内部同样设置一个a标签（href="#"）才可以关闭这个弹窗。

<body>
    <!-- 按钮 点击弹窗 -->
    <a href="#testWrap"><button>弹窗

最低0.47元/天解锁文章