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

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

I was inspired by Webflow's Mega-menu and challenged myself to recreate it without custom code.
Added a custom popup modal for the Contact form as well.

I hope you like the result as much as I do :)

Feel free to clone and see how it works...

WePay

Mega-Menu challenge

Simple pop up element that appears on page load. If cloning this for your own site, be sure to recreate the page load animation on your site.

Page Load Pop Up

Pop-up on Page Load

Here's a tutorial on creating Modals in Webflow, using 100% Webflow, no custom code.

FREEBIE/Tutorial: Webflow Modals

Modal Tutorial

A simple pop-up modal to add to your website with instructions on how to make it display only once. 

This way when a user sees it, they won't see it again as they browse the website.

Follow along with the video tutorial: https://youtu.be/uSgSoEQD1vs

Simple Pop-Up Modal

Another clone for your featured in my new webflow portfolio. Project cards, on click unveiling a transition effect and full screen modal. Each card with individual client colors. Watch out for the combo classes when duplicating and add new interactions!

Let me know if you have problems.

And check the full portfolio here: www.web-bureau.weblfow.io

Wanna have another cloneable section available - let me know in a comment.

Happy cloning!

Cards with Transition Effect

Cards with Transition Effects

Ajax Modal

Start your website with our cloneable hero section design perfect for eCommerce websites 💼

Components & Features:

⦿ 3 different Dropdown Menu layouts
⦿ Full-Screen Slider with a  2-Column layout including a Lightbox element in each slide.
⦿ eCommerce features added and pre-formatted cart.

--------------

Like this cloneable? 👍

We're coming soon with a huge library of more such high-quality and free cloneable hero section designs for every kind of website built in Webflow.

For more FREE CLONEABLES
→ https://theherosection.webflow.io/

--------------

Support:

If you have any difficulty understanding the design or any part of it, please feel free to comment below. Alternatively, you can send us an email here: support[at]theherosection.com

--------------

License:

⦿ Images from Unsplash (CC0 license)
⦿ Iconography from FontAwesome
⦿ Clash Display font from Fontshare.com

THS16 Shop

Ecommerce Cloneable Hero Section

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

Add dynamic modal forms or other content nested inside a collection list. Sometimes we have collection lists with CTAs and popups and sometimes we want those popups to also be dynamic.

In this cloneable, I nested a collection inside of a "main" collection, so the content of each modal was relevant to its corresponding item in the "main" collection.

With Webflow's CMS and conditional visibility, you can show all sorts of different content for your modals!

Nested dynamic modal forms

Pretty Nice Websites

Microsite we built for Afterpay/Clearpay to showcase their annual aggregate shopping data for 2019. The client wanted to incorporate a lot of movement in the site, so we used a healthy mix of page-scroll animations for parallax movement, as well as scroll-into-view triggers for some list sections. 

We also created some gateway pages and cookie acceptance pop ups that track when a user visits the site so they don't get the same pop up twice. To see how we did that check out the custom code in the page settings.

For the hero videos, the client wanted to ensure that the video players had no third party branding on them, so Webflow's youtube element was out. We ended up going with a custom embed from Wistia, which allows you to strip all branding from the videos.

Let us know what you think!

Afterpay

Afterpay Global Trend Report

Quickly add new team members with their own personal pop up modal by creating a dynamic modal using interactions 2.0.

If you have any questions on creating this with IX2, reach out on the forum or email me: mark@webflow.com

Team member demo

Dynamic Team Info

Awesome book - Awesome site that could only have been built with Webflow!

Bears Want To Kill You

Bears Want To Kill You - Book

Ramp

We are Ramp, a small but mighty team of London-based Webflow experts focused on delivering high-quality, optimised sites that we build to scale with our clients from the ground up - collaborating with founders, marketing teams and agencies.

Through strong collaboration, we craft our experiences with not only the end user in mind but you, your team and your future site stakeholders. Our team will set up your site for you - easy content updates, simple site-wide edits and quick page creation done your way.

We sit in the sweet spot between being Webflow developers and custom coders. We've mastered the art of Webflow and know how to push it to its limits, but we don't stop there. From intricate functionality to custom integrations, we've got you covered.

* See if you can find the easter egg!

M7 Branding & Design

Repairlab is an Apple Authorized Service Provider, located in Eindhoven, The Netherlands. The website has been designed and developed with a clear mission in mind: to streamline service requests in a beautiful and convenient user experience.

We implemented several interactions and scroll-animations, to make the website stand out that extra bit. Also, we worked with animated full-screen modals and an intuitive lead flow, to send automated mailings to customers.

Discover custom modal websites built by the Webflow community

Discover custom modal websites built by the Webflow community