CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-modalbootstrap-5
andre.hey
andre.hey

Reputation: 345

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

Upvotes: 1

Views: 11109

Answers (2)

Amin Mashayekhan
Amin Mashayekhan

Reputation: 613

In my opinion, there is no need to change the bootstrap.js file. I tried the following method in Bootsrtap 5.2.3. You can try something like this:

Note: To ensure that the second modal appears in front of the first one (and not behind it), place the HTML code of the second modal after (below) the HTML codes of the first modal (otherwise you would need to manage it with z-index). In your example code, it's OK.

Step 1: Once you add the bootstrap.js file to the HTML file, define the following function below it within the HTML file (or define it in another js file. for example, I define it in the HTML file):

<script>
    function openMyModal2() {
        let myModal = new
                bootstrap.Modal(document.getElementById('myModal2'), {});
        myModal.show();
    }
</script>

Step 2: Add an onclick attribute to the button that going to open the second modal. in your case, it's a tag:

<a class="btn btn-primary" onclick="openMyModal2()">Launch (my)modal(2)</a>

Now if you click on the a tag within the first modal, both modals will be open.

Step 3 (optional): Add a dark layer on the first (back) modal (for example by adding class bg-dark bg-opacity-50 to the second modal like so:

<div class="modal bg-dark bg-opacity-50" id="myModal2" data-bs-backdrop="static" style="display: none;" aria-hidden="true">

You can see the result in the following link: https://codepen.io/amin-mashayelhan/pen/XWOZygx

Upvotes: 6

DS87
DS87

Reputation: 602

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.

Upvotes: 2

Related Questions