CSS仅在关闭时弹出页移动。

Question

我试图创建一个CSS只欢迎弹出。所有操作都很好，除非当您关闭它时，页面向下移动到弹出div最初的位置。如何修复它，使页面在关闭弹出窗口时不会移动？

我用的是.

http://codepen.io/john84/pen/WrOZJj

HTML

<h1>Popup/Modal Windows without JavaScript</h1>
<div class="box">

<a class="button" href="#">Login /signup</a>
</div>

<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#popup1">&times;</a>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eleifend nunc non malesuada feugiat. Fusce lacinia urna sed nunc accumsan viverra.
</div>
</div>
</div>

CSS

*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background: url(http://www.shukatsu-note.com/wp-content/uploads/2014/12/computer-564136_1280.jpg) no-repeat;
background-size: cover;
height: 100vh;
}

h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 100px 0;
}

.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}

.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}

.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 0.2s;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}

/*Let's make it appear when the page loads*/
.overlay:target:before {
display: none;
}
.overlay:before {
content:"";
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
background: rgba(0, 0, 0, 0.6);
position: fixed;
z-index: 9;
}
.overlay .popup {
background: #fff;
border-radius: 5px;
width: 30%;
position: fixed;
top: 0;
left: 35%;
padding: 25px;
margin: 70px auto;
z-index: 10;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.overlay:target .popup {
top: -100%;
left: -100%;
}

@media screen and (max-width: 768px){
.box{
width: 70%;
}
.overlay .popup{
width: 70%;
left: 15%;
}
}

Answer 1

​

• 变化 .overlay:target:before {显示:无；} 至 .overlay:target{显示:无；}
• 变化

*，*：前{-webkit-框大小:边框-框；-moz-框-大小:边框框；框-大小:边框框；}正文{字体-家族: Arial，无衬线；背景: url(1280.jpg)不重复；背景大小:封面；高度:100 h1；}h1{文本-对齐:中心；字体-家族: Tahoma，Arial，sans-衬线；颜色：#06D85F；边距:100 px0；} .box {宽度: 40%；边距:0 auto；背景: rgba(255,255,255,0.2)；填充:35 2px；边框:2 2px实心#fff；边框-半径:20 2px/50 2px；背景剪辑:填充-框；文本-对齐:中心；} .button {字体大小: 1em；填充:10 2px；颜色：#fff；边框:2 2px实心#06D85F；边框半径:20 2px/50 2px；文本-装饰:无；光标:指针；过渡:所有0.3s易出；} .button:hover {背景：#06D85F；} .popup h2 {边距-顶部: 0；颜色：#333；字体-家族: Tahoma，Arial，sans-serif；} .popup .close {位置:绝对；顶部:20 h2；右:30 h2；过渡:顶部，右0.2s；字体大小:30 h2；字体-权重:粗体；文字-装饰:无；颜色：#333；} .popup .close:hover {颜色：#06D85F；} .popup .content {max-高度: 30%；溢出: auto；}/*当页面加载*/#弹出1:目标{ top：-100%；左：-100%；显示:无；} .overlay:before {content：“；.overlay:before{content：”；顶部: 0；左: 0；右: 0；底部: 0；显示:块；背景: rgba(0，0，0，0.6)；位置:固定；Z-索引: 9；} .overlay .popup {背景：#fff；边框半径:5 5px；宽度: 30%；位置:固定；顶部: 0；左: 35%；填充:25 5px；边距:70 5px汽车；z-索引: 10；-webkit-转换:所有0.6s轻松进入-out；-moz-过渡:所有0.6s轻松-入-出；过渡:所有0.6s轻松-输入-输出；} .overlay:target .popup{顶：-100%；左：-100%；}@媒体屏幕和(最大宽度:768 15){ .box{宽度: 70%；} .overlay .popup {宽度: 70%；左: 15%；}}