javascript - HTML CSS Make DIV 只要内容不是窗口

Question

我有一个简单的登录表单，允​​许用户做一些不同的事情。这些东西中的每一个都会在浏览器中打开一个“模态”窗口。只要登录表单的内容没有超出屏幕范围，那么一切都很好。当它出现并且用户向下滚动时，模式部分仅覆盖浏览器的大小，因此表单的其余部分未被覆盖。这允许他们打开第二个模式 block 。

我的模态 block CSS 是:

.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 40%; /* Could be more or less, depending on screen size */
  padding: 16px;
}

我的不透明覆盖物的 CSS 是:

.modalpwd {
  display: none; /* Hidden by default */
  z-index: 1; /* Sit on top */
  overflow: visible;
  align-self: center;  
  position: absolute;
  left: 0;
  top: 0; 
  margin-left: 0;
  margin-top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */  
}

模态部分的 HTML 是:

<div id="divResetPwd" class="modalpwd">
    <span onclick="document.getElementById('divResetPwd').style.display='none'" class="close" title="Close Modal">&times;</span>
    <div class="modal-content">
        <h1>First Time Login - Set Password</h1>
        <p>Please fill in this form to set your password.</p>
        <hr/>

        <label for="psw"><b>Verification Code</b></label>
        <input type="text" runat="server" placeholder="Enter the verification code sent to your email address" id="txtCode2" >

        <label for="psw"><b>New Password</b></label>
        <input type="password" placeholder="Enter New Password" runat="server" id="txtpsw">

        <label for="psw-repeat"><b>Repeat New Password</b></label>
        <input type="password" placeholder="Repeat New Password" runat="server" id="txtpswrepeat">

        <div class="clearfix">
            <button type="button" onclick="document.getElementById('divResetPwd').style.display='none'" class="cancelbtn">Cancel</button>
            <button type="submit" runat="server" id="btndivResetPwd" class="signupbtn" onserverclick="SetPassword">Submit</button>
        </div>
    </div>    
</div>

最后附上两张图。一个显示滚动前的屏幕，第二个显示滚动后的屏幕。如果用户单击第二张图片中的“注册”按钮，则会显示第二个“模态”窗口。

非常感谢。

Answer 1

您必须在叠加层上使用固定定位而不是绝对定位。绝对定位会随着页面滚动，固定定位不会。您可以了解更多关于差异的信息 here .

这是更新后的覆盖代码:

.modalpwd {
  display: none; /* Hidden by default */
  z-index: 1; /* Sit on top */
  overflow: visible;
  align-self: center;  
  position: fixed;
  left: 0;
  top: 0; 
  margin-left: 0;
  margin-top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */  
}