I have encountered an issue with a modal view that contains content extending beyond its boundaries. To remedy this, I applied the overflow-y: scroll property. However, the problem arises when the modal view overlaps with the body, which also has scrolling enabled. As a result, attempting to focus on the modal and scroll may inadvertently cause the body to scroll instead of the intended modal view. It appears that the z-index values are being ignored in this scenario.
Is there a potential jQuery solution that would allow me to exclusively focus on the modal view and disregard any content below it?
Below is the HTML & CSS code for the modal division:
<div class="modal-window">
<div class="modal-content">
<div class="modal-image"></div>
<ul class="modal-details">
<li>Placeholder text</li>
<li>Placeholder text</li>
<li>Placeholder text</li>
<li>Placeholder text</li>
<li>Placeholder text</li>
</ul>
</div>
</div>
.modal-window {
position: fixed;
z-index: 4;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
top: 100px;
width: 476px;
height: 618px;
border: 1px solid white;
}
.modal-content {
position: relative;
z-index: 4;
height: inherit;
width: inherit;
overflow-y: scroll;
}
Additionally, here is a video demonstration showcasing the issue :
As depicted in the video, rather than focusing solely on the modal, scrolling sometimes affects the underlying body as well. In certain instances, the interaction even bypasses the modal and directly engages with the body. How can I ensure exclusive focus on the modal when it is active and completely disregard any elements underneath?