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.


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.


Ohad Raz
Ohad Raz

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

  8. Hello, I am trying to manually trigger the PopUp by manually so I can add an event listener on a button. I created a PopUp with the id ‘798’. In WordPress the shortcode is ““.

    When I attempt to assign a reference to the Popup, I get undefined in the Elementor Custom Code warning. Code Snippet below

    document.addEventListener(‘DOMContentLoaded’, function () {
    var popupId;
    var popupInstance;
    var menuTrigger = document.querySelector(‘.subscribe_btn’);

    if (menuTrigger) {
    menuTrigger.addEventListener(‘click’, function (e) {
    alert (‘clicking subscribe’);
    if (popupInstance) {
    function initializePopup() {
    popupId = ‘798’; // Replace ‘your-popup-id’ with the actual ID of your Popup.

    popupInstance = elementorProFrontend.getPopup(popupId);
    alert(‘popupInstance :::: ‘ + popupInstance);//// —— >> popupInstance is undefined

    // Check if Elementor Pro Frontend API is available
    if (typeof elementorProFrontend !== ‘undefined’) {
    // If it’s available, initialize the Popup
    } else {
    // If it’s not available yet, listen for the ‘elementor/frontend/init’ event
    document.addEventListener(‘elementor/frontend/init’, initializePopup);

  9. Hi,

    I would like to refresh the popup data after hiding it.
    I added several product filters, radiobuttons etc. in the popup. After closing the popup and opening again, all the selected options are lost.
    How can I do that?

Leave a Reply

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