ARTICLES

Elementor Pro JavaScript Popup Events Change

Updated an Elementor website to v3.9.0 and noticed my previous custom JavaScript listening on Elementor popup show and popup hide doesn’t work anymore.

After check on the source code, noticed the event dispatched differently now.

This is the old event:

// Listening popup show event
jQuery( document ).on( 'elementor/popup/show', ( event, id, instance ) => {
	if ( id === 123 ) {
		// do your magic here
		console.log( 'elementor/popup/show', id )
	}
});

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

This is the new event:

// Listening popup show event
window.addEventListener( 'elementor/popup/show', ( event )=>{
	const id = event.detail.id;
	const instance = event.detail.instance;
	
	if( id === 123 ) {
		// do your magic here
		console.log( 'elementor/popup/show', id )
	}

})

// Listening popup hide event
window.addEventListener( 'elementor/popup/hide', ( event )=>{
	const id = event.detail.id;
	const instance = event.detail.instance;
	
	if( id === 123 ) {
		// do your magic here
		console.log( 'elementor/popup/hide', id )
	}

})

I am not really sure this changes started since which version, but hope this give you some clues if your custom scripts not working anymore after certain updates.

  • About Author

    Jenn@Itchycode
    I like to solve problems by coding. I like websites, web applications and everything viewable from browser. Knowledge sharing can grows my confidence. A simple "thank you" will make my day :)
    More about me

Subscribe For Notification

Get notification whenever new article published.
Subscription Form

Discussion

COMMENT

Brilliant this worked like a charm.
I have Elemetor Pro and pro support and they completely refused to assist with this. Blaming third party plugins etc. Usual dodge the issue routune from Elementor Support. Lucky there are good people like you to solve these issues.
Many thanks.
Tiernan

Reply
By Tiernan Martin (2 years ago)

Glad that my article helps.

By Jenn@Itchycode (2 years ago)

Excuse my ignorance, but can you guide me on how one determines the ID of the event? Is it just the ID of the modal popup? For instance, elementor-popup-modal-251?

Reply
By Chris (2 years ago)

Hi Chris,

Yes, then the ID will be 251.

if( id === 251 ) {
// do your magic here
}

By Jenn@Itchycode (2 years ago)
New comment
Comment Form