HTML CSS Сделать DIV, пока контент не окно - PullRequest
Новая
       33

HTML CSS Сделать DIV, пока контент не окно

0 голосов
/ 26 марта 2019

У меня есть простая форма входа в систему, которая позволяет пользователю делать несколько разных вещей.Каждая из этих вещей открывает «модальное» окно в браузере.Пока содержание формы входа не выходит за пределы экрана, все хорошо.Когда это происходит, и пользователь прокручивает вниз, тогда модальная часть покрывает только размер браузера, поэтому остальная часть формы раскрывается.Это позволяет им открыть второй модальный блок.

Мой 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>

Наконец, я прикрепил две картинки.Один показывает экран перед прокруткой, а второй показывает экран после прокрутки.Если пользователь нажимает кнопку «Зарегистрироваться» на втором изображении, появляется второе «модальное» окно.

Before Scrolling After Scrolling

Большое спасибо.

1 Ответ

5 голосов
/ 26 марта 2019

Вы должны использовать фиксированное позиционирование на оверлее вместо абсолютного позиционирования.Абсолютная позиция будет прокручиваться вместе со страницей, фиксированная позиция не будет.Вы можете узнать больше о различиях здесь .

Вот ваш обновленный код наложения: 

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