我有一个奇怪的问题,我正在构建一个简单的html、css和js弹出式登录界面,我不知道为什么每次我从登录弹出式更改为注册/注册弹出式时,边距顶部都会发生变化.
当我从登录弹出窗口更改为注册弹出窗口时,我想保持页边顶部不变,特别是在移动视图上,我需要它保持不变,以不扭曲移动视图.
请看下面的图片和代码.
首先,Login Interface,请注意上面的边距
现在,当我单击Register时,它会根据需要打开Register弹出窗口,但会更改边距顶部集.
第二,Register interface,但利润率顶部已经改变,我不希望它改变.
我的代码
<div id ="open_login_interface">
<div class="open_login_interface_inner">
<div class="log-reg-container">
<div class="modal-content">
<div class="modal-head">
<!--Bla Bla Bla-->
</div>
<div class="modal-body">
<div class="box" id="login-pop">
</div>
<div class="box" id="sign-pop">
</div>
</div>
<div class="modal-footer">
<!--Bla Bla Bla-->
</div>
</div>
</div>
</div>
</div>
CSS
#open_login_interface {
display: block;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
-o-user-select: none;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: url(ie.png);
background: -moz-linear-gradient(rgba(11,11,11,0.1), rgba(11,11,11,0.6)) repeat-x rgba(11,11,11,0.2);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(11,11,11,0.1)), to(rgba(11,11,11,0.6))) repeat-x rgba(11,11,11,0.2);
z-index: 8888;
}
.open_login_interface_inner {
background: #fff;
position: fixed;
margin: 0 auto;
margin: 0;
margin-top: 15%;
width: 28%;
min-height: 20%;
height: auto;
max-height: 75%;
left: 0;
top: 0;
left: 50%;
top: 10%;
transform: translate(-50%, -50%);
text-align: center;
border: 0px;
border-radius: 3px;
}
@media (max-width: 640px){
.open_login_interface_inner {
position: absolute;
width: 80%;
margin-top: calc((100vh - 100vw)/2);
}
}
.log-reg-container{
width: 90%;
margin: 0 auto;
}
.modal-content {
height:auto;
width:100%;
}
.modal-body {
width:100%;
}
.box {
padding-left: 0px;
padding-right: 0px;
margin-top: 20px;
}