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

Question

我有一个模式弹出窗口，它警告用户我们使用 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

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>