Keeping Focus on Bootstrap Modal While Tabbing

280 Views Asked by At

Does anyone know what it is that keeps the focus on the Bootstrap modal while tabbing? What I'm referring to happens when the modal is open and the user presses the Tab key and the user is able to continually stay focused in the modal. Meaning that on a modal with three focusable items, the user can press Tab many times and watch the focus loop through the items within the modal and only that.

My problem is that on our Modals the focus leaves the modal, first it goes to the browser's address bar and then to other browser options.

Is it a JavaScript built into the Bootstrap JS bundle that does this?

I am providing the rendered HTML of an open modal.

<div id="resolveTransmissionModal" class="modal fade dialog-modal show" tabindex="-1" role="dialog" aria-labelledby="resolveTransmissionModallabel" data-backdrop="static" aria-modal="true" style="display: block;">
  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header align-items-center">
        <h2 class="modal-title">Resolve Transmission</h2>
      </div>

      <div class="modal-body">
        <h2>Dwight Guardian Metlife LIMRA</h2>
        <p>This will close this transaction and mark the status "Manually Closed".</p>
      </div>
      <div class="modal-footer">

        <button id="resolveTransmissionModal_primary" type="button" role="button" class="btn btn-primary " data-dismiss="modal">Yes, close this transaction</button>

        <button id="resolveTransmissionModal_secondary" type="button" role="button" class="btn " data-dismiss="modal">Close</button>

      </div>
    </div>
  </div>
</div>
0

There are 0 best solutions below