With that being said, the recurring issue that always arises is as follows:
-modal and overlay appears,
-user scrolls down
-user can click elements under the overlay
How can this be fixed? The primary concern right now is with the overlay.
The CSS code for the overlay is:
.overlay
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
display: none;
z-index: 7000;
}
Given that I am using it within an asp page, the structure of the HTML is as follows:
<html>
<body>
<form>
<div class = "overlay"></div>
<div class = "modal">...</div>
</form>
</body>
</html>
I was uncertain if this structure has any impact on the issue.
One solution could be to make the overlay stretch the height/width, or to make the overlay and modal move with the scroll. However, I am unsure how to achieve this.