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.

Author

Ohad Raz
Ohad Raz

24 Responses

  1. Can you trigger these events with JS? If I needed to setup a custom click event, what would I use? See below example.

    // jQuery Click Function
    $( “#foo” ).on( “click”, function() {

    // trigger the “‘elementor/popup/show'” event here

    });

    Why is this necessary? Because not every element has the option to setup a modal. This is the issue. In my example, I have a menu item that should open a login modal. But I can’t trigger the modal from within the Nav Menu widget.

  2. How exactly do I use this?

    In my pop-up, do I insert a HTML widget and then place the code there? Or do I insert it on the page where pop-up is supposed to appear?

    I have tried both and none of them work.

  3. Can you please write an example. I have a form on which users are not supposed to select some field, if they do, I want a popup to display saying they can’t select that field

  4. 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.

  5. 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…

  6. 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.

  7. Not working as described.
    1. Must be attached to `window` and not `document`.
    2. Only passes event object to the callback. Id and instance are undefined.

Leave a Reply

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

Birthday Sale: Up to 50%30% Off
Birthday Sale: Last 24 hours!
Birthday Sale: Last 24 hours:
DAYS
HR
MINS
SEC
Wait! You get 30-Day Money-back Guarantee

You have nothing to lose – but the discount

days
hours
minutes
seconds