My webpage has some content, and I also have a modal that pops up on top of it.
The problem I'm facing is that when I try to scroll the contents within the modal, only the contents behind it scroll instead.
Below is the CSS code:
html, body {
background: blue;
margin: 0px;
}
/* Content Behind */
.content {
width: 100%;
background: red;
z-index: 100;
}
/* Modal Above */
#modal {
background: yellow;
position: fixed;
top: 10px;
left: 50%;
width: 400px;
transform: translateX(-50%);
z-index: 200;
overflow: scroll;
display: none;
padding: 5px;
}
.show {
display: block !important;
}
Thank you