Html 模态弹出自动向下滚动

我有一个模式弹出窗口，警告用户我们使用cookie（以及其他模式）。当按下accept按钮时，它将创建一个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>

我注意到，当删除

#modal{top:15%}

时，页面只向下滚动约20px，但随后modal出现在错误的位置

试试这个

$（.modal background.modal close”）。打开（“单击”，函数（）{
$（“.modal容器，.modal背景”）.hide（）；
});
。模态背景{
位置：固定；
排名：0；
左：0；
背景：rgba（0,0,0,0.7）；
宽度：100%；
身高：100%；
z指数：0；
}
.集装箱{
位置：相对位置；
z指数：1；
宽度：500px；
利润率：150px自动；
背景：#fff；
边界半径：3px；
字体系列：Arial，无衬线；
字体大小：12px；
}
.modal容器。modal关闭{
浮动：对；
光标：指针；
字体风格：普通；
字体系列：Arial，无衬线；
}
.modal容器.modal标题{
边界半径：3px3px0；
背景：#333；
填充：15px 15px；
颜色：#fff；
}
.modal容器.modal信息{
填充：25px 15px；
边框底部：1px实心#ccc；
}
.modal容器.按钮容器{
背景：#ccc；
填充：15px；
边框顶部：1px实心#fff；
}
.模态容器.按钮容器按钮{
显示：块；
保证金：自动；
填充：5px15px；
光标：指针；
文本转换：大写；
字体大小：12px；
}

饼干x
我们使用cookies来改善您的体验
接受
请添加fiddle示例您不希望您的modal具有
位置：已修复
？您应该发布一个更好的示例，因为您当前的代码无法很好地演示问题。您提到的问题可能是因为css中的位置/位置问题。@AbhinavGauniyal我还没有考虑添加位置修复。但是“css的位置/位置问题”是什么意思呢？不，仍然存在相同的问题，页面scrollss downI关闭了错误报告，并且在modal使用的php中不使用回显，只在按下accept按钮时通过php设置cookie。这个问题最近才开始出现，所以我相信它与css或HTMLI有关系。可以使用JS强制顶部加载吗？尝试在
body
标记上添加类。
modal open
当modal打开时，对
body使用此
css
。modal open{overflow:hidden}
/* 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}
}