Модальные всплывающие окна автоматически прокручиваются

Question

У меня есть модальное всплывающее окно, где оно предупреждает пользователей о том, что мы используем куки (среди других модалов). Когда нажата кнопка accept, она создает файл cookie и не даст пользователю некоторое время видеть модальный. Когда модальность не отображается, страница просто прекрасна, но когда она всплывает, страница автоматически прокручивается примерно на 20% вниз, и это меня раздражает.

Heres модальный:

<div class="modal-background"> 
<form action="/etc/set_cookie.php" method="post"> 
    <div id="modal"> 
    <div class="modalconent tabs"> 
     <fieldset> 
     <span class="close">×</span> 
      <h2 class="fs-title">Cookies</h2> 
      <h3 class="fs-subtitle">We use cookies to improve your experience</h3> 
      <iframe style="width:100%; height:80px;" src="/etc/txt/cookies.php" ></iframe><br /> 
      <input type="submit" name="cookie" value="Accept" id="button" class="btn fr" style="width:180px; padding:10px;" /> 
     </fieldset> 
    </div> 
    </div> 
</form> 
</div> 


<script> 
window.onload = function() { 
    document.getElementById('button').onclick = function() { 
     document.getElementById('modal').style.display = "none" 
    }; 
}; 





// Get the modal 
var modal = document.getElementById('modal'); 

// Get the <span> element that closes the modal 
var span = document.getElementsByClassName("close")[0]; 

// When the user clicks on <span> (x), close the modal 
span.onclick = function() { 
    modal.style.display = "none"; 
} 

// When the user clicks anywhere outside of the modal, close it 
window.onclick = function(event) { 
    if (event.target == modal) { 
     modal.style.display = "none"; 
    } 
} 
</script> 

и CSS:

/* Modal 
************************************************** */ 
.modal-background { 
    background:rgba(0,0,0,0.8); 
    min-height:100%; 
    width:100%; 
    position: fixed; 
    z-index:90; 
} 

#modal { 
    position: absolute; 
    z-index: 99999; 
    width: 100%; 
    top:15%; 
} 
.modalconent { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 100%; 
    -webkit-animation-name: animatetop; 
    -webkit-animation-duration: 0.6s; 
    animation-name: animatetop; 
    animation-duration: 0.6s  
} 


.close { 
    color:#475f93; 
    float: right; 
    font-size: 28px; 
    font-weight: bold; 
} 

.close:hover, 
.close:focus { 
    color: #000; 
    text-decoration: none; 
    cursor: pointer; 
} 



/* Add Animation */ 
@-webkit-keyframes animatetop { 
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1} 
} 

@keyframes animatetop { 
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1} 
} 

Я заметил, что при удалении #modal { top:15%; } страницы только прокручивает вниз около 20px, но модальный находится в неправильном месте

JSFIDDLE

Answer 1

Попробуйте

Here is codepen.io example

$(".modal-background, .modal-close").on("click", function(){ 
 
    $(".modal-container, .modal-background").hide(); 
 
});

.modal-background { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    background: rgba(0, 0, 0, 0.7); 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 0; 
 
} 
 

 
.modal-container { 
 
    position: relative; 
 
    z-index: 1; 
 
    width: 500px; 
 
    margin: 150px auto; 
 
    background: #fff; 
 
    border-radius: 3px; 
 
    font-family: Arial, Sans-serif; 
 
    font-size: 12px; 
 
} 
 
.modal-container .modal-close { 
 
    float: right; 
 
    cursor: pointer; 
 
    font-style: normal; 
 
    font-family: Arial, sans-serif; 
 
} 
 
.modal-container .modal-header { 
 
    border-radius: 3px 3px 0 0; 
 
    background: #333; 
 
    padding: 15px 15px; 
 
    color: #fff; 
 
} 
 
.modal-container .modal-info { 
 
    padding: 25px 15px; 
 
    border-bottom: 1px solid #ccc; 
 
} 
 
.modal-container .button-container { 
 
    background: #ccc; 
 
    padding: 15px; 
 
    border-top: 1px solid #fff; 
 
} 
 
.modal-container .button-container button { 
 
    display: block; 
 
    margin: auto; 
 
    padding: 5px 15px; 
 
    cursor: pointer; 
 
    text-transform: uppercase; 
 
    font-size: 12px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="modal-background"></div> 
 
<div class="modal-container"> 
 
    <div class="modal-header">cookies <i class="modal-close">x</i></div> 
 
    <div class="modal-info"> 
 
    We use cookies to improve your experience 
 
    </div> 
 
    <div class="button-container"> 
 
    <button type="submit">accept</button> 
 
    </div> 
 
</div>