One of my website features is a modal popup that informs users about our use of cookies. When they click the accept button, a cookie is created to prevent the modal from appearing again for some time. However, I've noticed that when the modal pops up, the page automatically scrolls down by around 20%, which is quite annoying.
Here is the code for the modal:
<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>
Additionally, here's the CSS used for styling the modal:
/* 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}
}
Upon experimenting, I found that removing #modal { top:15%; } reduces the scrolling to just 20px, but misaligns the modal.