HTML CSS使DIV，只要内容不在窗口中

Question

我有一个简单的登录表单，该表单允许用户执行一些其他操作。所有这些都在浏览器中打开一个“模式”窗口。只要登录表单的内容不超出屏幕范围，那么一切都很好。当它打开并且用户向下滚动时，模式部分仅覆盖浏览器的大小，因此该表单的其余部分将不被覆盖。这使他们可以打开第二个模态块。

我的模式块的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

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

这是您更新的覆盖代码：

.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 */  
}