使用JavaScript关闭Elementor弹出窗口

Question

我有一个使用Elementor创建的弹出窗口，打开时会播放视频。我想在视频结束后关闭它（比如90秒），但是我找不到如何用Javascript关闭元素或弹出窗口。

我尝试了类似这样的https://github.com/elementor/elementor/issues/7085，但由于它不是点击操作，只是等待并关闭函数，我认为我不能让它工作。

任何指导都将有所帮助。谢谢。

- William

Answer 1

元素制作者给了我这个：

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

我希望它对你有用。

- Ka' de Xaeoc

Answer 2

选项1-延时关闭

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

选项2 - 当触发 ended 事件时关闭（参见https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/ended_event）

注意：这是一种贪婪的关闭方式 - 它会点击任何打开的弹出窗口上的关闭按钮，但除非您有多个弹出窗口，否则谁在乎呢？

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

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

更加节约的选项 - 如果你想要关闭特定的弹出窗口，可以在 ⚙ > 高级 中给你的弹出窗口添加一个类，比如 DATPOPUP，然后使用以下代码：

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

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

还要注意：在您的代码中，您将.close-button作为关闭按钮的类选择器引用。不确定最近几个月是否有变化，但当前版本的Elementor Pro将此元素赋予了类.dialog-close-button。

- James Revillini

Answer 3

我还没有找到任何特定于Elementor的调用，但是我能够非常简单地模拟在90秒后点击关闭按钮。

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

我很愿意听到更好（正确）的方法来做这件事，但如果有人正在寻找类似的临时解决方案，这个方法是有效的。

- William