html - 模态弹出窗口自动向下滚动

标签 html css

我有一个模态弹出窗口,它警告用户我们使用 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,但是模态框在错误的位置

JSFIDDLE

最佳答案

试试这个

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>

关于html - 模态弹出窗口自动向下滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40124647/

相关文章:

html - 工具提示 : Center a tool tip in table

html - 在移动屏幕中交换 2 div 的顺序

css - 垂直居中带有过渡的 Font Awesome 图标

html - 图片上的文字百分比 html css

javascript - 用户使用 Javascript 输入动态表

css - CSS只适用于IE9,其他css都适用

javascript - CSS3垂直功能区

javascript - 用于从每个选项卡的特定位置复制数据的 Chrome 扩展程序

css - 在 firebug 或 chrome 开发工具中将 ems/rems 增加 0.1?

javascript - 选择元素后制作订单列表