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%; }时,页面仅向下滚动约20像素,但是模式位于错误的位置

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/

相关文章:

php - 如何使用 Codeigniter php 框架显示图像?

javascript - HTML5 Canvas - 字母居中?

html - 文本和图像在背景 div 中彼此相邻

javascript - 每页一页网站更改菜单颜色

css - Z-stacking CSS 3 Flex 框 : how to overlay DIVs that are flexbox items?

html - IE8 自关闭 HTML5 标签

html - Bootstrap Jumbotron背景图像未在style.css中设置

javascript - 在“for”,“if”循环中的某些位置调用函数

html - 下拉列表 MVC 4

html - 带有行号的Pygments HTML表-代码单元的水平滚动条