Bootstrap Modal can not overlap in Bootstrap 5.1.3 version

In Bootstrap 5.1.3 and later versions, modal dialogs are designed to have a new behavior where they cannot overlap each other by default. This behavior was introduced as part of the "Multiple modals" feature, which prevents multiple modals from stacking on top of each other and causing confusion for users.

If you want to revert to the old behavior where modals could overlap, you can use a custom CSS class to modify the z-index property. However, please note that overlapping modals can lead to a less user-friendly experience and may not be recommended from a design perspective.

To enable overlapping modals, you can add a custom CSS class and set the z-index property for the modals:

htmlCopy code
<!-- HTML -->
<div class="modal modal-overlap" tabindex="-1">
  <!-- Modal content -->
</div>

cssCopy code
/* CSS */
.modal-overlap {
  z-index: 1050; /* Adjust the z-index value as needed */
}

By adding the .modal-overlap class to your modal elements and setting the appropriate z-index value, you can enable overlapping modals in Bootstrap 5.1.3 and later versions.

However, please keep in mind that overlapping modals may not provide the best user experience and can lead to confusion for users. It's essential to carefully consider the design and usability implications before making this change.