我有一个模态弹出窗口,它警告用户我们使用cookie(以及其他模态)。当按下接受按钮时,它会创建一个cookie并阻止用户再次看到模态。当模态没有显示时,页面就好了,但是当弹出页面时,页面自动向下滚动约20%,这让我很烦恼。
继承人的模式:
<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,但是模态位于错误的位置
答案 0 :(得分:1)
试试这个
$(".modal-background, .modal-close").on("click", function(){
$(".modal-container, .modal-background").hide();
});
&#13;
.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;
}
&#13;
<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>
&#13;