css实现弹出框

弹出框也是前端里面经常使用的一个应用场景了，最开始想到的是用js实现这个效果，看到codepen上面有用css实现的。其实就是用到了css里面的一个:target选择器+visibility属性。

URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。:target 选择器可用于选取当前活动的目标元素。

示例代码：

<div class="container">
<a href="#popup" class="button">删除</a>
<div class="popup" id="popup">
<div class="popup-inner">
<div class="popup__text">
<h3>删除宝贝</h3>
<p>确定要删除该宝贝吗？</p>
<p><span><a href="javascript:void(0)">确定</a></span><span><a href="#">关闭</a></span></p>
</div>
<a href="#" class="popup__close">&times;</a>
</div>
</div>
</div>scss代码：
$main-color: #9191E9;* {
box-sizing: border-box;
padding: 0;
margin: 0;
}html, body {
font-family: 'Raleway', sans-serif;
font-size: 16px;
}.container {
background-color: $main-color;
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
}.button {
text-decoration: none;
font-size: .875rem;
}.popup {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
bottom: 0;
right: 0;
width: 100vw;
height: 100vh;
z-index: 2;
visibility: hidden;
&-inner {
background-color: #fff;
width: 400px;
height: 180px;
display: flex;
align-items: center;
position: relative;
bottom: -100vw;
right: -100vh;
transform: rotate(32deg);
transition: .64s ease-in-out;
}
&__text {
padding: 2rem;
h3 {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 1.2rem;
}
p {
font-size: .75rem;
margin-top: 1rem;
}
span {
display: inline-block;
padding: .42rem 1rem;
margin-right: .625rem;
a {
text-decoration: none;
}
&:first-child {
background-color: #52A0E5;
border: 1px solid #52A0E5;
a {
color: white;
&:hover {
text-decoration: underline;
}
}
}
&:last-child {
border: 1px solid grey;
a {
color: grey;
&:hover {
color: red;
text-decoration:underline;
}
}
}
}
}
&__close {
position: absolute;
right: 1.8rem;
top: 1.8rem;
font-size: 1.5rem;
color: grey;
text-decoration: none;
font-weight: 800;
}
&:target {
visibility: visible;
.popup-inner {
bottom: 0;
right: 0;
transform: rotate(0);
}
}
}


scss代码有点略长，核心就是.popup:target与visibility的结合，为什么不用opcaity和display呢？在这个场景中，opacity会影响html页面里的锚（这里面的popup遮挡到了body里面的a标签），而display不支持transition，并使transition失效。这里为了让弹出框不那么突兀地出现，加了一个小小的动画效果。