Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – Close Elementor Popup with JavaScript

I have a popup created with Elementor that plays a video when opened. I am trying to get it to close after the video if finished (say 90 seconds), but I can’t find how to close an element or Popup with Javascript.

I have tried something like this https://github.com/elementor/elementor/issues/7085, but as it’s not a click action, just a wait and close function I don’t think I can’t get it to work.

Any direction would be helpful. Thank you.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I still haven't found any Elementor-specific calls, but I was able to go super simple and just simulate a click on the close button after 90 seconds.

    setTimeout(
   function(){
      document.querySelector('.close-button').click();
   }, 90000);
);

    I would love to hear of a better (proper) way to do this, but if anyone is looking for a similar hot fix this works.


  2. 0

    Option 1 – time delay close

    setTimeout(
   function(){
      document.querySelector('.dialog-close-button').click();
   }, 90000);
);

    Option 2 – close when ended event is triggered (see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended_event)

    note: this is a greedy close – it’ll click the close button on any open popups, but unless you have multiple popups, who cares?

    const video = document.querySelector('video');

video.addEventListener('ended', (event) => {
  document.querySelector('.dialog-close-button').click();
});

    Less greedy option – if you wanted to target closing a specific popup, give your popup a class such as DATPOPUP in ⚙ > Advanced, then use this code:

    const video = document.querySelector('video');

video.addEventListener('ended', (event) => {
  document.querySelector('.DATPOPUP .dialog-close-button').click();
});

    Also note: in your code, you referenced .close-button as the class selector for the close button. Not sure if things changed in recent months, but the current Elementor Pro gives this element the class .dialog-close-button.

    Login or Signup to reply.
  3. 0

    The elementor guys gave me this:

    jQuery( document ).ready(function($){
$(document).on('click','.elementor-location-popup a', function(event){
    elementorProFrontend.modules.popup.closePopup( {}, event);
}) });

    I hope it works for you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search