HTML 一次使用兩個模態

Question

所以我的目標是有一個模式作為一個計時器，當用戶滾動第二個模式作為測試時，它將跟隨。

** <div class="modal-window" id="testTimer" role='dialog' data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header" id = 'timerCountdown'>
            <h4 class="modal-title text-center">Time Remaining</h4><br>
             <h4 class="modal-title text-center">90:00</h4>
          </div>
          <div class='modal-footer text-right'>
          <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal-window" id="quizModal"  tabindex="-1" role="dialog"data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg" style="position: relative; display: table; overflow-y: auto; overflow-x: auto; width: auto; min-width: 700px; max-width: 1080px">
      <div class="modal-content">
        <div class="modal-title text-center"><h2 id='quizModalTitle'></h2></div>
        <div class="modal-body" id='quizModalContent' max-height='calc(100vh - 210px)' overflow-y ='auto'></div>
        <div class='modal-footer text-right'>
          <button type="button" id = 'testClose' class="btn btn-white" data-dismiss="modal" onclick="fetchQuizProgress()">Close</button>
        </div>
      </div>
    </div>
  </div>**

這是我對兩個模態的擁有，它看起來像這樣

在我的 JavaScript 中，我在第一個模態上使用了 .scrollIntoView() 但它似乎根本不影響它。 問題是第二個模式不可滾動，並且都被鎖定到位。 讓它像我想要的那樣工作是否可行？

一旦達到特定時間，我有一個超時來隱藏'testTimer'。 一旦關閉，'quizModal' 就可以滾動了。

Answer 1

所以同時擁有兩個模態函數真的很麻煩。 相反，我想將標題設為計時器，並且只有模態（測試）的主體可滾動。

<div class="modal inmodal fade" id="quizModal" tabindex="-1" role="dialog"  aria-hidden="true" data-backdrop="false" data-keyboard="false">
     <div class="modal-dialog" style="overflow-y: scroll; width: 1200px;max-height:100%; max-width: 100%; margin-bottom: 25px" > 
      <div class="modal-content">
        <div class="modal-header text-center"><h2 class = "modal-title" id='quizModalTitle'></h2></div>
        <div class="modal-body " style = 'height: 400px;overflow-y: auto;' id='quizModalContent'></div>
        <div class='modal-footer text-right'>
          <button type="button" id = 'testClose' class="btn btn-white" data-dismiss="modal" onclick="fetchQuizProgress()">Close</button>
        </div>
      </div>
    </div>
  </div>

像魅力一樣工作。 感謝： https : //www.codeply.com/go/bp/T0yF2ZNTUd

Stack Overflow 上的 Carlos Calla。