Is there a way to display multiple Bootstrap 5 modals simultaneously without automatically closing the previous ones?

Question

Is there a way to display multiple Bootstrap 5 modals simultaneously without automatically closing the previous ones?

My current project utilizes bootstrap 5.2, which is a departure from the previous version, bootstrap 3. In bootstrap 3, it was possible to open multiple modals on top of each other, creating an overlapping effect. However, in bootstrap 5 and 5.2, the behavior has changed - when opening a new modal, the previous one closes instead of overlapping.

Unfortunately, reverting back to the old bootstrap 5 is not an option for me. If anyone knows of a workaround for this issue, I would greatly appreciate any guidance.

Thank you for taking the time to read this.

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="11737e7e65626563706151243f233f22">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e2c21213a3d3a3c2f3e0e7b607c607d">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7L+jL+Ykk+o2h455rYXK/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

css twitter-bootstrap bootstrap-modal bootstrap-5

Answer 1

Answer №1

My recommendation is to leave it as is. However, upon reviewing the bootstrap.js file in the "Modal" section, I came across the following lines from Version 5.2.3:

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

This snippet of code ensures that only one modal window is open at a time. If an attempt is made to open a modal while another is already open, the previously opened one will be automatically closed.

Answer 2

My recommendation is to leave it as is. However, upon reviewing the bootstrap.js file in the "Modal" section, I came across the following lines from Version 5.2.3:

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

This snippet of code ensures that only one modal window is open at a time. If an attempt is made to open a modal while another is already open, the previously opened one will be automatically closed.

Answer 3

Answer №2

Personally, I believe there is no need to modify the bootstrap.js file. In my experimentation with Bootsrtap 5.2.3, I found a method that works well. You might want to give it a try:

Note: To ensure that the second modal appears in front of the first one (rather than behind it), place the HTML codes for the second modal after those of the first modal (otherwise, you may have to adjust the z-index). In your example code, this arrangement seems suitable.

Step 1: Once you have added the bootstrap.js file to your HTML document, define the following function below it within the HTML file (or in a separate js file - in my case, I defined it directly in the HTML file):

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

Step 2: Assign an onclick attribute to the button that will trigger the opening of the second modal. In your scenario, this would be an a tag:

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

Upon clicking on the a tag, both modals should open.

Step 3 (optional): Optionally, add a dark overlay to the background of the first (rear) modal by applying the bg-dark class 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 view the outcome at the following link: https://codepen.io/amin-mashayelhan/pen/XWOZygx

Answer 4

Personally, I believe there is no need to modify the bootstrap.js file. In my experimentation with Bootsrtap 5.2.3, I found a method that works well. You might want to give it a try:

Note: To ensure that the second modal appears in front of the first one (rather than behind it), place the HTML codes for the second modal after those of the first modal (otherwise, you may have to adjust the z-index). In your example code, this arrangement seems suitable.

Step 1: Once you have added the bootstrap.js file to your HTML document, define the following function below it within the HTML file (or in a separate js file - in my case, I defined it directly in the HTML file):

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

Step 2: Assign an onclick attribute to the button that will trigger the opening of the second modal. In your scenario, this would be an a tag:

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

Upon clicking on the a tag, both modals should open.

Step 3 (optional): Optionally, add a dark overlay to the background of the first (rear) modal by applying the bg-dark class 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 view the outcome at the following link: https://codepen.io/amin-mashayelhan/pen/XWOZygx

Is there a way to display multiple Bootstrap 5 modals simultaneously without automatically closing the previous ones?

Answer №1

Answer №2

Similar questions

The AngularJS modal is sending back the results before updating the parent scope

Place the div absolutely on top of the Flash content

Triggering jQuery events can be customized by excluding certain elements using the

The header logo will have an absolute position to overlay the navigation menu when the screen is resized

How to turn off pinch to zoom feature in Mozilla Firefox on a Microsoft tablet or touch screen display

Customizing listview appearance in asp.net with css and enhancing with javascript

Combining a Python backend with an HTML/CSS/JS user interface for desktop applications: the perfect synergy?

Unable to set a specific position for adding a new option in a dropdown menu

Display issue with loading animation

Persistently Undefined Angular Attribute

Analysis of printing functionality across Chrome, Safari, and Firefox browsers

Stylish grey container with crisp white lettering

Issue with border spacing functionality

Utilize various CSS styles for individual sections within a multi-page website

Vuejs components that have checkboxes already selected out of the box

What is the best way to add padding to both the TextField input and label components within Material UI?

What is the best way to trigger a method once an image has completed loading and rendering?

Having trouble getting the smooth scroll-behavior to work properly in Tailwind CSS?

Can the height of one div be determined by the height of another div?

Continuously refreshing the content