Discover the best modals websites created by professional designers. Get inspired and start planning your perfect modals web design today!

This is a quick guide on creating modals that stop the page from scrolling, after you've opened a modal.

Closing the modal via a background click or by clicking on the on the close icon, closes the modal and then makes the page scrollable again.

Frozen Modal

Stop the page from scrolling when a modal is open

Three different modals to use in your projects. Automatically adds a scrollbar if the content exceeds the height of the page / modal. 

Feel free to ask questions below!

Advanced Modal Popups with Scrollbars

Free Cloneable: Advanced Modal Popups with Scrollbars

Once the popup is open, scrolling of the entire page is disabled using custom code (body = overflow hidden). This helps longer content in the popup overlay to scroll more comfortably without accidentally scrolling the whole page. For the video popup, additional custom jQuery code is needed to stop the video from running in the background when the close button is clicked.

Tutorial: https://youtu.be/JbNtDkrfH0U

Custom Content and Video Popup / Modal

Memberstack

Hey wonderful folks! Just wrapped up a simple one-time welcome modal which appears after signup.

Under the hood, it's using a tiny bit of custom code (Explained in the tutorial video) to show or hide an element based on a link parameter. If "welcome=" is present in the URL, then the element will appear. 

You could adapt this code to do all kinds of things! On form submissions, on signup, on login, on logout, on button click, etc. etc. Anytime the page refreshing and you can set a new link param this code will fire. 

Welcome Overlay with Steps

Welcome Overlay after Signup or Upgrade | Tutorial

A growing accessible component library Accessible accordion, modals, amazon style menu and more. With instructions on how to implement them in your own projects. Uses @finsweet client first system and webflow javascript snippets

trm-accessible-components

Accessible Webflow Components

A copy and paste-able add to cart bottom slide up to use with Flow Phantom Upsells and Webflow Ecommerce.

This cloneable is ready to use with Flow Phantom Upsells! The upsell will show when an item is added to the cart. Feel free to use this cloneable as is or customize it further.

Upsells will only work with Flow Phantom Upsells! To create an account visit https://dashboard.flowphantom.com and start building upsells for free on webflow.io domains or learn more by visiting https://www.flowphantom.com.

Add to Cart Upsell Bottom Slide Up

A copy and paste-able add to cart left slide over to use with Flow Phantom Upsells and Webflow Ecommerce.

This cloneable is ready to use with Flow Phantom Upsells! The upsell will show in the slide over when an item is added to the cart. Feel free to use this cloneable as is or customize it further.

Upsells will only work with Flow Phantom Upsells! To create an account visit https://dashboard.flowphantom.com and start building upsells for free on webflow.io domains or learn more by visiting https://www.flowphantom.com.

Add to Cart Upsell Left Slide Over

A copy and paste-able post purchase right slide over to use with Flow Phantom Upsells and Webflow Ecommerce.

This cloneable is ready to use with Flow Phantom Upsells! The upsell will show in the slide over post purchase. Feel free to use this cloneable as is or customize it further.

Upsells will only work with Flow Phantom Upsells! To create an account visit https://dashboard.flowphantom.com and start building upsells for free on webflow.io domains or learn more by visiting https://www.flowphantom.com.

Post Purchase Upsell Right Slide Over

Post Purchase Right Slide Over

A copy and paste-able post purchase left slide over to use with Flow Phantom Upsells and Webflow Ecommerce.

This cloneable is ready to use with Flow Phantom Upsells! The upsell will show in the slide over post purchase. Feel free to use this cloneable as is or customize it further.

Upsells will only work with Flow Phantom Upsells! To create an account visit https://dashboard.flowphantom.com and start building upsells for free on webflow.io domains or learn more by visiting https://www.flowphantom.com.

Post Purchase Upsell Left Slide Over

A copy and paste-able add to cart modal to use with Flow Phantom Upsells and Webflow Ecommerce.

This cloneable is ready to use with Flow Phantom Upsells! The upsell will show when an item is added to the cart. Feel free to use this cloneable as is or customize it further.

Upsells will only work with Flow Phantom Upsells! To create an account visit https://dashboard.flowphantom.com and start building upsells for free on webflow.io domains or learn more by visiting https://www.flowphantom.com.

Add to Cart Upsell Modal

A copy and paste-able add to cart right slide over to use with Flow Phantom Upsells and Webflow Ecommerce.

This cloneable is ready to use with Flow Phantom Upsells! The upsell will show in the slide over when an item is added to the cart. Feel free to use this cloneable as is or customize it further.

Upsells will only work with Flow Phantom Upsells! To create an account visit https://dashboard.flowphantom.com and start building upsells for free on webflow.io domains or learn more by visiting https://www.flowphantom.com.

Add to Cart Upsell Right Slide Over

Sample website of a fictional wedding space I named Juniper Grove. This was my first website that I created with Webflow, and I have to say that I am really enjoying using it. What a super easy-to-use, intuitive builder! 

I created this site to learn how to use Webflow and to see if I could do things like make albums, modals, accordions, buttons, an embedded calendar, etc., which of course I could do.

This was mostly just play. I like how it turned out so much that I think I may use it in my portfolio, but I thought I would share it with the community here too!

Juniper Grove

juniper-grove

Seed Paper Project is a clever click funnel where the user receives a seed paper card in the mail which they can plant into a flower.  The seed paper has a unique code printed on it, which the user can input along with their email after clicking the "I want to see what plant I have" button.  I wrote the custom code which all occurs in the modal to dynamically inform the user what flower seed they received and send the email address to Mailchimp.

Seed Paper Click Funnel

A copy and paste-able post purchase modal to use with Flow Phantom Upsells and Webflow Ecommerce.

This cloneable is ready to use with Flow Phantom Upsells! The upsell will show post purchase. Feel free to use this cloneable as is or customize it further.

Upsells will only work with Flow Phantom Upsells! To create an account visit https://dashboard.flowphantom.com and start building upsells for free on webflow.io domains or learn more by visiting https://www.flowphantom.com.

Post Purchase Upsell Modal

A copy and paste-able on load upsell with section to use with Flow Phantom Upsells and Webflow Ecommerce.

This cloneable is ready to use with Flow Phantom Upsells! The upsell products will change based on the items in the cart. Feel free to use this cloneable as is or customize it further.

Upsells will only work with Flow Phantom Upsells! To create an account visit https://dashboard.flowphantom.com and start building upsells for free on webflow.io domains or learn more by visiting https://www.flowphantom.com.

Frequently Purchased with

On Load Upsell Frequently Purchased with

A look at our recent collaboration with psych research lab featuring custom stylized brain scans and modern team page.

TAB Lab

The TAB Lab

Recent collab with a local inventor and product designer new to showcase his new agriculture-related biz.

Discover modals websites built by the Webflow community

Discover modals websites built by the Webflow community