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:

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:

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

As always, your feedback is welcome.