How to Create a Native Modal in Webflow Without a Plugin

Learn how to create a native modal pop-up in Webflow without a plugin: overlay, click-to-open, and close.

In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how to create a native modal pop-up in Webflow without a plugin, with open-on-click and close-by-clicking-the-overlay behavior.

Example

Element	CSS class	Role
Overlay	modal-overlay	Semi-transparent background that covers the entire page
Modal box	modal-box	The modal content
Open button	open-modal	Open trigger
Close button	close-modal	Closes the modal

1. Create the modal structure

Create a Div modal-overlay with position Fixed, covering the entire page (top/left/right/bottom: 0), background rgba(0,0,0,0.5), display: none, z-index: 1000. Inside it, add a centered Div modal-box (margin: auto). Add a close-modal button inside the modal-box. Create an open-modal button somewhere else on your page.

2. Add this script in the <body>

const overlay = document.querySelector('.modal-overlay');
document.querySelector('.open-modal').addEventListener('click', function() {
  overlay.style.display = 'flex';
  document.body.style.overflow = 'hidden';
});
document.querySelector('.close-modal').addEventListener('click', function() {
  overlay.style.display = 'none';
  document.body.style.overflow = '';
});
overlay.addEventListener('click', function(e) {
  if (e.target === overlay) {
    overlay.style.display = 'none';
    document.body.style.overflow = '';
  }
});

good to know

Add closing on Escape key press for better accessibility: document.addEventListener('keydown', function(e) { if (e.key === 'Escape') { overlay.style.display = 'none'; document.body.style.overflow = ''; } });. body.style.overflow = 'hidden' prevents the page from scrolling in the background when the modal is open.

Conclusion

A native modal improves conversions and UX without weighing down your site. Use cases:

Contact or demo form
Action confirmation (deletion, purchase)
Lightbox image gallery

Good to know

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Learn more

4.9/5 • 97 reviews

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

Let's discuss

4.9/5 • 97 reviews

Discover

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.