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

There are some times when you need to prevent the user from scrolling when a certain event occurs. An example could be when a modal is opened after clicking a button.

Use the code in this project to easily prevent the users from scrolling when clicking any element.

Disable Scroll

Disable Scrolling on Click (compatible with all devices)

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

003 Modal

Memberstack

MemberStack freebie #6! 

Use this just-in-time pricing table to upsell your products or services when a user clicks on a premium feature or wants to see your pricing.

The site is mobile friendly, user-friendly, and designer-friendly. I hope it comes in handy on a future project!

MemberStack is not required to use this project. 

If you need any help, you can reach us via the chat on MemberStack.io or our email team@memberstack.io.

#6 - Premium Pricing / Upgrade Modal

#6 - Pricing Modal | Upgrade Modal

A valuable utility for the Webflow community:

Enables body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrolling of a target element (eg. modal/lightbox/flyouts/nav-menus).

Features:
- Disables body scroll WITHOUT disabling scroll of a target element
- Works on iOS mobile/tablet (!!)
- Works on Android
- Works on Safari desktop
- Works on Chrome/Firefox

The Custom Code is 2 Parts:
1. Desktop solution, courtesy of @Sabanna 
2. Mobile touch + iOS solution, courtesy of Bohdan Didukh

Body Scroll Lock (Works For ALL Devices)

Lock Body Scroll (iOS Included)

Another B&W component.

Keep the modal out of the hover parent div.

B&W grid hover

B&W grid + modal

A pop up modal that will be triggered upon toggle ON in the CMS collection item while retaining the default link to the collection item page template. Triggered popup modal will disable body scroll and enable when closed.

Use scenario: If a specific item's detail page is not ready, user can toggle on this popup modal to notify visitor and prevent visitor from viewing the incomplete detail page.

Have fun cloning. 😄

====================

💖☕ Support us by buying us a coffee.

If you enjoy our content, please consider supporting us. Your support will help us grow bigger and provide the community with better content.

https://www.buymeacoffee.com/sketchzlab

===================

💌 Follow us on social media.

Facebook @ www.facebook.com/sketchzlab
Instagram @ www.instagram.com/sketchzlab/
Twitter @ www.twitter.com/SketchzLab
Webflow @ www.webflow.com/SketchzLab
LinkedIn @ www.linkedin.com/company/sketchzlab/
YouTube @ www.youtube.com/channel/UCAEXTAQ7IAG71rsJ1ehBnzQ

sketchzlab-cloneable-5

CMS driven pop-up modal

Create a horizontal scroll on mobile that performs like a native smartphone app—all without interactions or complex code.

Horizontal Scroll on Mobile

Horizontal scroll on mobile

Hey Webflowers 💜

This is a free a new webflow cloneable made by Digidop using client first system. 

🔥 Search bar popup modal 🔥

We use : 

· Client first system to name the classes

· Html custom code to disable scrolling when the pop up is open

· Background image/effet to make it beautiful 🎨

Hope you will enjoy clone and custom this ressources. 

Made with love by Digidop, a french webflow agency 💛

Pop up modal by Digidop

search-pop-up-modal

We took a modal and turned it in to a 100VW/VH scrollable google map. Just embed your map locations. Clone and enjoy.

Map Modal

map-modal

Here is an example popup retrieving a collection page into a Modal popup using Ajax javascript.

The ajax will only load collection pages on the same domain.

Help with this example or other custom code is here: https://forum.webflow.com/c/help/code-help

Cheers!

CMS Pop Up using Ajax

CMS Detail Popup Modal

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

I wanted to showcase my portfolio of illustration work I've amassed while working with a lot of twitch streamers and I took this opportunity to implement a lot of IX2 interactions including mouse movement , scroll, custom modals and a light/dark mode toggle button.

Discover modal scroll websites built by the Webflow community

Discover modal scroll websites built by the Webflow community