我正在構(gòu)建一個著名的Wordle游戲的變體。我有幾個模態(tài)對話框(即& quot彈出窗口& quot)，那都有css類modal-large。

出于某種原因，這些對話框的一個實例導(dǎo)致頁面跳轉(zhuǎn)到不同的位置。當我關(guān)閉這個模態(tài)對話框時，頁面返回到它的初始位置。

這里有一個展示這種行為的gif。

這個gif首先展示了同一個css類的另外兩個對話框，它們都工作得很好，然后展示了這個對話框的一個實例，它不工作。

我在尋找關(guān)于為什么會發(fā)生這種不希望的跳躍/滾動的建議，以及故障排除的想法。

我已經(jīng)用Chrome DevTools檢查過了，但到目前為止還看不到任何明顯的問題。

作為參考，這里有模態(tài)大和模態(tài)大內(nèi)容類

.modal-large {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  border-radius:12px;
}

/* Modal Content */
.modal-large-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

下面是錯誤對話框的HTML結(jié)構(gòu)。

<!-- Game Modal (Game Over, win, etc)-->
<div id="game-modal" class="modal-large" style="z-index:20 !important;">

  <!-- Modal content -->
  <div class="modal-large-content">
    <div class="modal-large-header">
      <span id="game-modal-close" class="close">&times;</span>
      <span id="game-modal-header"><h2>Game Modal Header</h2></span>
    </div>
    <div id="game-modal-body" class="modal-large-body">
      
    </div>
    <div id="game-modal-footer" class="modal-large-footer">
      
    </div>
  </div>

</div>

所有三個對話框都使用這種結(jié)構(gòu)和相同的類/樣式。

為了完全公開，這里是在這個對話框的某些部分使用的其他樣式，按照HTML結(jié)構(gòu)

@media only screen and (min-width: 600px) {
    .modal-large-content 
    {
        width: 420px;
    }
}

/* 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}
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-large-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
  text-align: center;
}

.modal-large-body {
    padding: 2px 16px;
    text-align: center;
    color:gray;
}

.modal-large-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
  text-align: center;
}

.shareon > a{
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
}