How to open another modal in modal with Bootstrap?

Sometimes, we want to open another modal in modal with Bootstrap.

In this article, we’ll look at how to open another modal in modal with Bootstrap.

How to open another modal in modal with Bootstrap?

To open another modal in modal with Bootstrap, we can set the z-index of the modals.

For instance, we write

<a data-bs-toggle="modal" href="#myModal" class="btn btn-primary">
  Launch modal
</a>

<div class="modal" id="myModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Modal title</h4>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-hidden="true"
        ></button>
      </div>
      <div class="container"></div>
      <div class="modal-body">
        Content for the dialog / modal goes here.
        <a data-bs-toggle="modal" href="#myModal2" class="btn btn-primary"
          >Launch modal</a
        >
      </div>
      <div class="modal-footer">
        <a href="#" data-bs-dismiss="modal" class="btn btn-outline-dark"
          >Close</a
        >
      </div>
    </div>
  </div>
</div>

<div class="modal" id="myModal2" data-bs-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">2nd Modal title</h4>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-hidden="true"
        ></button>
      </div>
      <div class="container"></div>
      <div class="modal-body">
        Content for the dialog / modal goes here. Content for the dialog / modal
        goes here.
      </div>
      <div class="modal-footer">
        <a href="#" data-bs-dismiss="modal" class="btn btn-outline-dark"
          >Close</a
        >
        <a href="#" class="btn btn-primary">Save changes</a>
      </div>
    </div>
  </div>
</div>

to add the modals.

Then we set the z-index of the modals by writing

.modal:nth-of-type(even) {
  z-index: 1062 !important;
}
.modal-backdrop.show:nth-of-type(even) {
  z-index: 1061 !important;
}

so the 2nd modal will show on top of the first one.

Conclusion

To open another modal in modal with Bootstrap, we can set the z-index of the modals.