Elementor Pro 2.7: Popup Events

Cover image

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.

Share on facebook
Share on twitter
Share on linkedin

Author

Ohad Raz
Ohad Raz

Comments

12 Responses

  1. I’m having issues submitting Elementor forms embedded in popups to Hubspot because the popup and the form don’t exist on the page on load.

    Is there a way to initialise the popups when the page is loaded and not only when it’s triggered to be displayed? In that case, I’d have the html of the popup and of the form in the page from the beginning and I’d show the popup later on.

  2. Hello, your code sample doesn’t work!

    Uncaught ReferenceError: id is not defined

    I tried with popupId too, the variable is null.
    I thought, the ID should be the same as wordpress’s post-id…

  3. I think I may have found a bug:

    On Safari, there’s no way to identify the element that opened the popup because (assuming we used a for this) event.currentTarget.activeElement is the button on Firefox and Chrome, but on Safari event.currentTarget.activeElement is the document.

    The same happens to event.delegateTarrget.activeElement and event.target.activeElement

    On Safari, I was not able to find a variable to identify that the opened the popup.

Leave a Reply

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