Kevin Powell - Community•2y ago

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

sebinOP•2y ago

Mannix•2y 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

sebinOP•2y ago

yeah I try playing around with the z index too okay let me try this Still cant figure it out XD

Mannix•2y ago

did you remove the z-index?

sebinOP•2y 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•2y 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")
})

sebinOP•2y ago

IM GLAD IM LEARNING AT THE SAME TIME XDDD

Gaming

Programming

Pop up Modal Problem with other element behind it.