Question 288958 in CSS Question posted in
Some basic documentation can be found here.

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

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    In my opinion, there is no need to change the bootstrap.js file if you are sure that you need to have two open modals at the same time. I tried the following method in Bootsrtap 5.2.3,. You can try something it like this:

    Note: In order for the second modal to be in front of the first (not behind it), you need to add the HTML codes of the second modal after the HTML codes of the first modal (otherwise you need to manage it with z-index). In your example code, it’s OK.

    Step 1: After you add the bootstrap.js file to the HTML file, below it, define the following function in the HTML file or 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 you 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 both of them will be open.

    Step 3 (optional): Add a dark layer on the first (back) modal (for example by adding class bg-dark 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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search