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。