Thank you for response! For now I handled the issue with JS code and 'backdrop-patch' but my js code still cannot remove added '.backdrop-patch' if I used 3 level of modals. Anyways, I decided not to use 2 stacked modal over the first one.

BTW, you said 'stay tuned'. How I'll be informed or do you publish the resolution somehere?

Here is the js code
// BS Stacked Modals Backdrop Patch
// Store the IDs of first-level modals
var firstModalIDs = ['materialCard', 'anotherModalID'];

// Reference to the first-level modal
var firstLevelModal;

// Event delegation for click events on buttons inside first-level modals with data-bs-stacked-modal attribute
$(document).on('click', '.modal .modal-content button[data-bs-stacked-modal]', function (event) {
var stackingModal = $(this).data('bs-stacked-modal');
var modalContent = $(this).closest('.modal-content');
var modalID = modalContent.closest('.modal').attr('id');

// Check if the clicked button is inside a first-level modal and its ID is in the firstModalIDs list
if (modalID && firstModalIDs.includes(modalID) && stackingModal && modalContent.find('.backdrop-patch').length === 0) {
modalContent.prepend('<div class="backdrop-patch"></div>');
firstLevelModal = modalContent.closest('.modal'); // Store reference to the first-level modal
}
});

// Event listener for when a second modal is shown
$(document).on('shown.bs.modal', function (event) {
var stackedModal = $(event.target);
var modalID = stackedModal.attr('id');

// Check if the stacked modal is inside any modal (first-level, second-level (third level patch has bugs))
// and it has the data-bs-stacked-modal attribute
if (modalID && stackedModal.attr('data-bs-stacked-modal')) {
var firstModalContent = stackedModal.prev('.modal-content');
if (firstModalContent.length > 0) {
firstLevelModal = firstModalContent.closest('.modal');
}
}
});

// Event listener for when a second modal is hidden
$(document).on('hidden.bs.modal', function (event) {
if (firstLevelModal) {
var modalContent = firstLevelModal.find('.modal-content');
modalContent.find('.backdrop-patch').remove();
firstLevelModal = null;
}
});
and CSS:
.backdrop-patch {
position: absolute;
inset: 0;
z-index: 1;
background-color: var(--bs-backdrop-bg);
opacity: var(--bs-backdrop-opacity);
border-radius: var(--bs-modal-border-radius);
}

Hi ,

Thank you for sharing this. We will have a look at your solution for sure. We will inform you here and provide the hot fix once our solution is available. It's on our todo list.

Regards.

Hi Sean,
I'm surprized that the solution was so easy I found it in stackoverflow.
Patching was so bad

/* Adjust z-index for stacked modals and their modal-backdrop */
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'));

Hi ,

Great. Thank you for sharing this. We will check this further.

Regards.