Skip to content

Recommend Gemeos to your network and earn a commission

Discover our referral program
Let’s talk?

CRO / Conversion2 min read

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

Close it with the button, a click outside, or the Escape key

CSS classElementRole
modal-overlayPopup divElement to hide when Escape is pressed
is-visibleActive classClass 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 = '';
  }
});

Conclusion

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

Published on May 19, 2026

Sandro DA SILVA

Growth Marketer, Webflow expert, and jack-of-all-trades. Sandro handles commercial operations, ensures projects run smoothly, and addresses marketing-related issues (SEO, Tracking, Copywriting, etc).

You might be interested in these tutorials

Related tutorials

See all

You're going to working with us, guaranteed

Ready to launch your business?

get a quote

Let’s f*****G GO !!