Creating Modals that can be closed by Clicking Outside in Webflow

🖐 Check out my Webflow templates: robn.link/templates
🤙 Try out Webflow using my affiliate link: webflow.grsm.io/robin
This will give me a small commission, which will help me lots. Thank you so much :)
This video will show you how you can create a modal that's possible to close by both clicking a close button, as well as outside the modal itself. It's actually really easy, you just need to separate the modal and a background wrapper (with a lower z-index than the modal itself) and add the same close interaction to the modal's button, as well as the background wrapper.
Have fun.
🖐 Portfolio: shapedbyrobin.com
🖐 Twitter: / shapedbyrobin
🖐 Instagram: / shapedbyrobin
🖐 Webflow: webflow.com/robingranqvist
🖐 Dribbble: dribbble.com/robingranqvist

[@oleksandrboiko554]

excellent guide! many thanks!

[@diegoamendoza734]

Really loving the content bro, thank you!

[@shapedbyrobin]

Thanks so much for watching man 🤙

[@AndresGutierrez-sz2oc]

Thank you! nice video

[@seanarts8172]

amazing! thank you so much :)

[@carlost2323]

I've done that for an accordion, however, when I close the accordion by clicking outside and I want to open it again I need to double click in the accordion. How do you prevent the second click when reopening the modal?

[@davidjirschitzka2775]

Nice and Simple! I did a rebuild but i included tabs. If i click on one of the tabs it closes the modal. Could you create a more advanced version of this modal?

[@shapedbyrobin]

Thank you 🤙 could you explain a bit more what you mean about a more advanced version of it?

[@davidjirschitzka2775]

@@shapedbyrobin hey, with advanced i mean the content inside the modal. What i wanted to create was a bio or about of a team member. In which you have the Option to click inside it and get more infos about the person.