How to control Elementor popups with popup events

· wordpress · 2 min read, Steve Monsen

What if you want to add an event listener to a mobile menu button that opens a popup? This tutorial will show you how to do that.

Background

Are you using Elementor popups but struggling to control them independently with JavaScript? Elementor includes popup events, but there is more to it than just adding an event listener to an element and then triggering the popup.

What happens when the visitor clicks or taps…

  • the Escape key?
  • outside the popup?
  • a menu’s close icon?
  • [other scenarios]

You need to make sure that your custom event listeners stay in sync with the Elementor popup state. Otherwise, a number of undesirable results may occur.

For example, the popup might not close when the visitor clicks the close icon. Or it may require multiple clicks to open the popup again, etc.

Here’s the Gist and a quick summary…