HTML Two modals at once

Question

So my goal is to have a modal that acts as a timer that will follow as the user scrolls a second modal that acts as a test.

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

This is what I have for the two modals and it looks like this

In my JavaScript I used .scrollIntoView() on the first modal but it doesn't seem to affect it at all. The issue is that the second modal isn't scrollable and both are locked in place. Is it feasible to get this working like I want?

I have a timeout to hide the 'testTimer' once it reaches a certain time. Once it closes the 'quizModal' becomes scrollable.

Answer 1

So having two modals function at once is really messy. Instead, I thought to make the title the timer and have only the body of the modal (the test) scrollable.

<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>

Worked like a charm. Thanks to: https://www.codeply.com/go/bp/T0yF2ZNTUd

And Carlos Calla on Stack Overflow.