How to Ensure Correct Modal Stacking with Multiple Modals in Bootstrap?

Multiple Modals Overlay

In an interface with multiple modals, it's crucial to ensure that the opened modals stack correctly, with each new modal appearing above the previous ones. However, a common issue faced by developers is that subsequent modals may display behind existing ones, creating an undesirable overlay.

To address this issue, a solution involving the modification of the z-index property of the modal backdrops and its elements is presented.

Backdrop z-index Fix

To ensure the correct stacking order of modal backdrops, a tailored solution is implemented. Specifically, a setTimeout function is utilized, as the modal backdrop is not present during the show.bs.modal event trigger.

<code class="javascript">$(document).on('show.bs.modal', '.modal', function() {
  const zIndex = 1040 + 10 * $('.modal:visible').length;
  $(this).css('z-index', zIndex);
  setTimeout(() => $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack'));
});</code>

This approach possesses several key advantages:

• It operates effectively for every modal on the page, including those dynamically created.
• The backdrop instantaneously overlays the modal beneath it, resulting in seamless stacking.

z-index Calculation

In cases where customized z-index values are preferred, an alternative method for calculating the highest z-index on the page can be employed:

<code class="javascript">const zIndex = 10 +
  Math.max(...Array.from(document.querySelectorAll('*')).map((el) => +el.style.zIndex));</code>

Scrollbar Fix

To address potential issues with scrolling when a modal extends beyond the browser height, an additional script can be implemented:

<code class="javascript">$(document).on('hidden.bs.modal', '.modal',
  () => $('.modal:visible').length && $(document.body).addClass('modal-open'));</code>

Version Compatibility

The presented solution has been thoroughly tested and confirmed to function effectively with Bootstrap versions 3.1.0 - 3.3.5.

The above is the detailed content of How to Ensure Correct Modal Stacking with Multiple Modals in Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!