How to Close a Popup with the Esc Key in Webflow

Learn how to close a popup or modal in Webflow with the Esc key using a JavaScript keydown listener.

In this tutorial, Sandro, cofounder of the Gemeos Webflow agency, shows you how to close a popup or modal in Webflow with the Escape key.

Example

CSS class	Element	Role
modal-overlay	Popup div	Element to hide when Escape is pressed
is-visible	Active class	Class added when the popup is open

The script

Add this script in the Before </body> tag of your page. Replace .modal-overlay with your popup class.

document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') {
    var modal = document.querySelector('.modal-overlay');
    if (modal) {
      modal.style.display = 'none';
      document.body.style.overflow = '';
    }
  }
});

Adapt it for multiple popups

To close all open popups at once with Escape:

document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') {
    document.querySelectorAll('.modal-overlay').forEach(function(m) {
      m.style.display = 'none';
    });
    document.body.style.overflow = '';
  }
});

good to know

This script complements the close-on-outside-click behavior. Use both for the full experience: close on overlay click + close with the Escape key. That’s the WCAG 2.1 accessibility standard for dialogs: they should be closable with the keyboard.

Conclusion

One line of code that significantly improves keyboard accessibility. See also: create a native modal in Webflow.

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