Search code examples
csstwitter-bootstrapbootstrap-modalbootstrap-5

How can I open multiple Bootstrap 5 modals without closing the old ones?

For my project I use bootstrap 5.2 and before like bootstrap 3. In 3 it was possible to open multiple modal like one in front and then open a new one and so on. The window of the modal overlaps each other.

In bootstrap 5 it works fine but in 5.2 the first modal closes and the new one opens. Its not like overlapping in the new one.

There is no option to use the old bootstrap 5. I need the 5.2 or above. If someone knows a workaround for this I would be very thankful.

Thank you for your time.

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>

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

  <div class="modal" id="myModal" style="display: none;" aria-hidden="true">
    <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" style="display: none;" aria-hidden="true">
    <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. Content for the dialog / modal goes here. 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>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>

EDIT: Here is the sinppet with bootstrap 5 and 5.2 (comment in or out to see the diff) https://codepen.io/andre-hey/pen/XWOMzrg

Solution

  • I won't suggest you to change it. However, looking at the boostrap.js file at the "Modal" section, there are the following lines in Version 5.2.3:

    if (alreadyOpen) {
  Modal.getInstance(alreadyOpen).hide();
}

    This code cares for that only one Modal is open. If a modal will be opened while another one is open, the opened Modal will be closed.