: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>弹窗</button></a>
<!-- 弹窗 -->
<div id="testWrap">
<!-- 弹窗的内容区域 -->
<div id="test">
<a href="#"><button>取消</button></a>
</div>
</div>
</body>
CSS设置
为了让大家能够更清晰快速地理解弹窗实现方式，CSS中除了使用弹性盒子让内容居中外没有做其他样式美化，以实现基本功能为主。
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
/* 按钮样式 */
button {
width: 100px;
height: 50px;
background-color: #ccc;
}
#testWrap {
/* 遮罩层效果 */
width: 100%;
height: 100%;
background-color: rgba(99, 99, 99, 0.5);
/* 弹性盒子使内容居中 */
display: flex;
align-items: center;
justify-content: center;
/* 采用固定定位使弹窗出现后不会随着页面滚动而移动 */
position: fixed;
top: 0px;
/* 隐藏 */
visibility: hidden;
}
#test {
/* 内容区域 */
width: 400px;
height: 600px;
background-color: #757575;
/* 弹性盒子使内容居中 */
display: flex;
align-items: center;
justify-content: center;
}
/* 使取消按钮定位到弹窗的右下角 */
#test a {
position: relative;
top: 230px;
left: 100px;
}
#testWrap:target {
/* 显示 */
visibility: visible;
}
大家理解之后可以通过添加过渡和位移属性做出更加美化的弹窗及点击滑出的导航栏。
430
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
