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.

How to Close a Popup with the Esc Key in Webflow

Example

The script

Adapt it for multiple popups

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

Heading

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum

Similar tutorials