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

所以同时拥有两个模态函数真的很麻烦。相反，我想使标题成为计时器并且只有模态（测试）的 body 可滚动。

<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

Carlos Calla 在 Stack Overflow 上。

HTML 一次有两个模态框

HTML Two modals at once

html

javascript

bootstrap-modal