Elementor Pro 2.7: Popup Events

In Elementor Pro 2.7 we are adding two event triggers to our Popups:

  • elementor/popup/show – when a Popup is opened/shown
  • elementor/popup/hide – when a Popup is closed/hidden

One thing we get a lot of requests for is a way to track Popups and a way to initialize JavaScript-based elements when a popup is shown. To allow that we added these to events mentioned above so now every time a Popup is shown we trigger the elementor/popup/show event and when a popup is closed we trigger the elementor/popup/hide event.

Usage:

The usage is very simple, you just add an event listener to the desired event with your callback, for example tracking popup opened events:

document.addEventListener( 'elementor/popup/show', () => {
	// do your tracking here
} );

Or if you prefer the jQuery version:

jQuery( document ).on( 'elementor/popup/show', () => {
	// do your tracking here
} );

The event callback is called with 3 variables:

  • Event – the dom event object.
  • popupId – the id of the popup which triggered the event
  • popupDocument – The elementor popup document object instance

This allows you to have even more control, for example, if I want to run my tracking code only when a specific popup is closed:

document.addEventListener( 'elementor/popup/show', ( event, id, instance ) => {
	if ( id === 123 ) {
		// do your tracking here
	}
} );

As always, your feedback is welcome.

Liked This Article?

We have a lot more where that came from! Join 730,315 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

About the Author

Ohad Raz
Ohad Raz

Share on

Share on facebook
Share on google
Share on twitter
Share on linkedin

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *