Design

1 views

5 min

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

How to Create a Native Modal in Webflow Without a Plugin

Example

1. Create the modal structure

2. Add this script in the <body>

Conclusion

Heading

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum

Similar tutorials