I’m having trouble with a modal on my website. The modal works perfectly on its own, but when integrated into my main site, it doesn’t behave as expected. Specifically:

Z-Index Priority: The modal should appear above all other content, but it’s being obscured by other elements on the page. I’ve tried setting the z-index for the modal, but it still doesn’t seem to have priority over the rest of the content.

Scrollability: The modal content is not scrollable. When the content inside the modal exceeds the viewport height, it’s not allowing the user to scroll to view the entire content.

Z-Index Adjustment: I tried setting the z-index for the .modal, .modal-dialog, .modal-content, and .modal-backdrop classes to ensure that the modal appears above all other content on the page. I set the z-index values as follows:

.modal: 1050
.modal-content: 1060
.modal-backdrop: 1040
I expected the modal to be displayed above all other content on the page, but it still appears behind some elements.

Scrollability Fixes: I set the max-height for .modal-content and .modal-body to make sure the modal content is scrollable if it exceeds the viewport height:

.modal-content: max-height: 90vh;
.modal-body: max-height: calc(100vh – 210px); and overflow-y: auto;
I expected the content within the modal to be scrollable when it exceeds the available height, but it remains unscrollable.