Site not clickable after closing pop-up modal

Design help Animations & Interactions
1

Hey all, ran into a problem I cant figure out, looking for another set of eyes.

I created a modal which fades in/out and show/s hides as described in webflow’s modal tutorial. I added the ability to click outside the modal box to close the modal by making a background div clickable, and reusing the close animation from my close button. However, now If you close the modal by clicking the BG, the whole site is no longer clickable. It works fine if you click the close button, but not if you click the background.

I cant figure out why, because it’s using the same close animation. Any help very much appreciated.

-Darren

Here is my public share link: https://home-parts-picker.webflow.io/
Read Only Link: https://preview.webflow.com/preview/home-parts-picker?utm_medium=preview_link&utm_source=designer&utm_content=home-parts-picker&preview=b010c1db99b59cbd637cd4ce6589eba6&mode=preview

2

The site is still clickable (This is not a bug or something).
But you put an opacity: 0; overlay on top of the entire content of the page.

Change the opacity to 0.9 to see this in action:

image
image1912×866 357 KB

Solution:
Use display:none (Not opacity:0).

3

Ahhh nice, thank you! I had somehow removed the step where it changes the display to none.

1 Like