如何使用 javascript 打开/使用 Elementor Pro 的内置灯箱

Question

在最简单的形式中，我尝试向我的 WordPress 网站（使用 Elementor Pro 创建）添加一些 JavaScript，这将在 Elementor 的内置灯箱中以 iframe 的形式打开一个链接。我不需要修改任何现有的小部件，也不需要构建自己的小部件。我只需将单击事件侦听器附加到特定元素，该元素将运行在具有指定属性的 Elementor 灯箱中打开指定 URL 所需的代码。

我知道有一些无代码的方法可以让链接打开灯箱，并且我也知道可以通过向元素添加某些标记来完成此操作。在这种情况下，我们就继续前进，不要选择任何一个。因此，我相信我只能尝试连接 Elementor 的前端并从那里开始操作。

到目前为止我已经：

jQuery(window).on('elementor/frontend/init', () => {
  document.addEventListener('click', function (e) {
    if (e.target.closest('#do-lightbox')) {
      const url = 'https://www.google.com';
      openLightbox(url);
    }
  });

  const openLightbox = url => {
    elementorFrontend.utils.lightbox.showModal({
      type: 'iframe',
      url: url,
      modalOptions: {
        id: 'elementor-lightbox-' + Date.now(),
        entranceAnimation: 'zoomIn',
        exitAnimation: 'zoomOut',
        closeButton: true,
      },
    });
});

此脚本使用

elementor/frontend/after_enqueue_scripts

钩子排在所有 Elementor 的前端脚本之后。

单击该元素会产生以下错误：

partner-logos-lightbox.js?ver=1731539592:28 Uncaught TypeError: elementorFrontend.utils.lightbox.showModal is not a function

在控制台中输入

elementorFrontend.utils.lightbox

表示它是已履行的 Promise，因此没有可用的

showModal

方法。所以我想这个错误是有道理的。我只是不确定如何访问灯箱。

任何指导将不胜感激。

Answer 1

要使用 JavaScript 打开并使用 Elementor Pro 的内置灯箱，您可以修改现有代码以在单击特定元素时触发灯箱。这是您可以使用的示例脚本：

jQuery(window).on('elementor/frontend/init', function() {
    document.addEventListener('click', function(e) {
        const target = e.target.closest('.open-lightbox'); // Change .open-lightbox to the class of the element you want to trigger the lightbox
        if (target) {
            e.preventDefault();
            const url = 'https://www.google.com'; // Replace this with the URL you want to open in the lightbox
            openLightbox(url);
        }
    });

    const openLightbox = url => {
        elementorFrontend.utils.lightbox.showModal({
            type: 'iframe',
            url: url,
            modalOptions: {
                id: 'my-lightbox-id', // Unique ID for the lightbox
                // Add any additional modal options here
            },
        });
    };
});

在此代码片段中：

1. 将

   .open-lightbox

   替换为单击时应触发灯箱的元素的类。
2. 使用您要在灯箱中打开的 URL 更新

   url

   变量。
3. 您可以根据需要在

   modalOptions

   对象内设置其他模式选项。

确保在您的 Elementor Pro 处于活动状态的网站上包含此 JavaScript 代码。此代码将侦听具有指定类（例如，

.open-lightbox

）的元素上的单击事件，并在单击时打开具有指定 URL 的 Elementor Pro 灯箱。