Here’s a quick and dirty way to create a modal in Webflow before we create our own Modal component inside Webflow.
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 is just one way of doing it. Choose different CSS for different behavior). Like so:
- Add a block (div) inside of it and call it “modal window”. Give it margin left and right “auto” so that it is centered in the page, and give it a width of 70%. (There are other ways you can center it using CSS like setting a % left and right margin or making it absolute positioned inside of the background. Your choice). Like so:
- Drop any structure and content inside of that block. Like so:
- Add a link block with an X icon or a “Close” text link with in the top right corner. Give that link the class “close modal” and style it any way you want. Like so:
- Select the modal background element that you placed in the body and make it Display: None like so:
- Create a button on the page and give it the class “modal link”.
Step 2: Add the codez
Finally…now you have everything set up in the Webflow Designer. Go to your dashboard and add this code in the
before </body> code section in your site’s settings:
And there you have it. Thanks @bartekkustra for the jQuery code to make this happen.
- You can tweak the width of the “modal window” so it’s not so squeezed in on mobile devices.
- I set the modal background to Absolute instead of Fixed on mobile devices so that users can actually scroll down to see all of the content inside the modal. The only problem is the background doesn’t stretch 100% of the height of the device. There are ways to fix this.
- To edit the modal - find it in your navigator, change Display: none to Display: block. Then you’ll be able to see it. Edit away. Don’t forget to change it back to Display: none.