Webflow Workshop #124: Creating a custom modal

[PixelGeek (Nelson)]

Join us on Tuesday, July 10th at 10am (pacific)
[ Save your spot ]

Modals are a great way to quickly offer more information or options without losing context. In this workshop, we’ll show you how to create a custom modal and add any sort of content.

[PixelGeek (Nelson)]

Here’s the free clonable project from today’s workshop.

modal-workshop - Webflow

Have fun with it

[failpunk (Justin Vencel)]

This does not seem to work with the new beta panel in the Webflow editor. Any ideas?

[mark1]

Hi, I’m experiencing the same problem as @failpunk … I cloned this project, didn’t make any adjustments, published it, but it doesn’t work. @PixelGeek, can you confirm whether or not the cloneable project still works for you? Thanks so much!

[Scott_Van_Zandt]

Maybe this post will help!

[Tutorial] How to create a modal/pop-up in Webflow

Here’s a quick and dirty way to create a modal in Webflow before we create our own Modal component inside Webflow. Example: http://modals.webflow.com Click here to mess with it inside Webflow. (the modal is the last invisible section.) Step 1: Design a modal Create a section in the body and give it a class “modal background”. Give it a transparent black background. Make it Position: fixed, and increase z-index. (This will make the modal stay in the same place when scrolling on the page. This…

[PixelGeek (Nelson)]

here’s a more up-to-date tutorial. Hope this helps

How to Webflow: Create a custom modal (2019) - Tutorial