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

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

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

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 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

Instead of sending people to a new page or using workarounds to show them modals, gate your premium features with custom modals using this SUPER simple, attribute based solution!

For a tutorial and more Webflow power-ups, go to: https://www.memberstack.com/memberscripts

Open Modal On Click If Not Logged In

Gating Content With Modals | MemberScript #26

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 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

Here's a emoji-based satisfaction survey form with an additional feature which grays out the submit button until an option has been selected!

Product Satisfaction Survey Modal

Product Satisfaction Survey Modal | MemberScript #22

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

We're working on something new for the Webflow community, and I though ya'll might be able to use this partial rebuilt I did.

I didn't stress about perfectly recreating the Webflow HTML embed code editor. I just wanted to get the idea across that it looks and feels like the code editor.

It's using Webflow interactions to open and close the modal. If you want to use it in a project of your own I recommend copying the outer-most element.

Stay tuned for some exciting projects coming up!! In the meantime, I hope this Webflow code editor is useful to you. 

HTML Embed Code Editor

Happy Tuesday! 

In this project, I've set up a passwordless login and sign-up form inspired by Deel. The form contains a modal and sends an email to the user for verification. Once the user enters the confirmation code in the pop-up, they can successfully log in.

Each form contains an 'MS hide' element, which is hidden until step-1 of the form is complete. This modal has another attribute on it which changes the display state.

To enhance the user experience, I've included optional custom code that saves the email input value and replaces it in the text of the form.

As always, if you have any questions or need help, feel free to leave a comment on the loom video: https://www.loom.com/share/7da25d4e1f0344d7b06dfe69f066dfca. 

I hope this passwordless sign-up and login form project proves useful for your Webflow endeavours.

Happy building!

Verification Modal

Passwordless Signup & Login with a Modal

Found this LinkedIn profile page cloneable by Christian Gilbang and it inspired me to make that modal you see when you go to someones profile without being logged in - all Memberstack attributes are applied here so it will show up to logged out users only, and the Google sign in works too!

LinkedIn Sign In Modal

Use this MemberScript to display and save a REAL countdown which saves in the local storage, and then removes elements from the DOM by user when the countdown is finished!

Also included is a little copy coupon code item with a Webflow Interaction.

Enjoy!

Countdown Upgrade Modal

#8 & #9 - Countdown Upgrade Modal | MemberScript Demo

Use this popup to let your members know it's time to upgrade their plan! This modal features a 2-tier design which means you can easily add 2 plans or 2 billing frequencies directly to the modal.

2 Tier Upgrade Modal

Here's a fun way to let people know their payment has gone through!

Because who doesn't love confetti?

Payment Successful Screen Confetti

Payment Successful Screen With Confetti

Here's a free cloneable reset password flow with a beautiful modern design!

All steps are included from the initial prompt all the way to being successfully logged in with the new credentials.

All Memberstack attributes are applied so it will be super easy to integrate into your project!

Discover modals websites built by the Webflow community

Discover modals websites built by the Webflow community