How can I use a click interaction on the body to close a modal?

Design help Animations & Interactions
1

I’ve made this very nice modal that activates when you click on the “work with us button”, check it out: http://creatiflabs.webflow.io/. The modal itself is outside a wrapper I’ve created for the rest of the page and activates with a click interaction on the button.

The problem is I’d like to be able to close the modal when a user clicks outside of it (on the body wrapper). But since the button to open it is also inside the body wrapper, it cancels the open interaction.

How could I make this work?

Here is the public page if you’d like to open on webflow https://webflow.com/website/Creatif-Labs?s=creatiflabs

1 Like
2

Hey @carlosxcl I love that modal interaction! :heart_eyes:

My recommendation would be to add an absolute positioned div with a lower z-index than your contact form inside of your Modal div, with 100% width, 100vh height. And add the “Close modal” interaction to it. You can add a background color to it or leave it colorless. Nice use of gradients and original modal interaction :smiley:

1 Like
3

Yes! Didnt think about that. That should work, thanks! :slight_smile:

4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.