How to Ensure Multiple Modals Overlay Correctly with a Visible Backdrop in Bootstrap?

Multiple Modals Overlaying

In this scenario, you desire the overlay to appear above the first modal, rather than behind it.

Solution

Inspired by contributions from @YermoLamers and @Ketwaroo, a comprehensive solution involves:

Backdrop Z-Index Fix

To address the issue of the backdrop appearing behind the first modal, implement the following JavaScript:

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

Z-Index Customization

If you wish to customize the z-index calculation, you can employ the following:

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

Scrollbar Fix

To resolve cases where closing a second modal prevents scrolling in a modal that exceeds the browser height, include the following JavaScript:

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

Versions

This solution is thoroughly tested with Bootstrap versions 3.1.0 through 3.3.5. By implementing this solution, you can ensure that multiple modals overlay correctly, with the backdrop appearing on top of the first modal and the scrollbar remaining functional as needed.

The above is the detailed content of How to Ensure Multiple Modals Overlay Correctly with a Visible Backdrop in Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!