Pop up Modal Problem with other element behind it.

Short brief about the issue is, since I made a pop up modal and centered it to the screen with position fixed. I cant click or interact the landing page anymore on mobile view because of the modal is in the center. The css property I used to make the modal pop up is
visibility hidden
visibility hidden
then target it on Js to make it
visible
visible
Any suggestion to fix this? https://codepen.io/pen?template=QWVWEqR
CodePen
...
7 Replies
sebin
sebin2y ago
Mannix
Mannix2y ago
nah i think it's a z-index on form-controls?? what is even the point of setting that there? also you probably want pointer-events: none; on the modal when it's hidden
sebin
sebin2y ago
yeah I try playing around with the z index too okay let me try this Still cant figure it out XD
Mannix
Mannix2y ago
did you remove the z-index?
sebin
sebin2y ago
why did not think of that huhu. Thankyou @mannix_ XDD can u also suggest a function how can I exit the pop up form when clicking outside the form?
Mannix
Mannix2y ago
add eventlistener on modal-bg
modalBg.addEventListener('click', (e)=>{
e.target.classList.remove("bg-active")
})
modalBg.addEventListener('click', (e)=>{
e.target.classList.remove("bg-active")
})
sebin
sebin2y ago
IM GLAD IM LEARNING AT THE SAME TIME XDDD
Want results from more Discord servers?
Add your server