如何使用 JavaScript 打开和关闭 Elementor 的 Popup 弹窗

在 Elementor Pro 中，弹窗（Popup）是一种强大的功能，可以用来显示重要的内容、表单或者优惠信息。虽然 Elementor 提供了图形界面的设置来管理弹窗，但是有时我们可能需要通过代码来控制弹窗的显示或关闭。本文将介绍如何使用 JavaScript 来实现这一功能。

1. Elementor 弹窗的 JS 控制 API

Elementor 提供了一个内置的 JavaScript API，允许我们通过脚本控制弹窗的打开与关闭。API 的核心方法如下：

打开弹窗：
```
elementorProFrontend.modules.popup.showPopup( { id: 123 } );
```
- id 是你要打开的弹窗的 ID，这个 ID 可以在后台 Elementor → 模板 → Popup 中找到。
关闭弹窗：
```
elementorProFrontend.modules.popup.closePopup( { id: 123 } );
```
- id 是你要关闭的弹窗的 ID，如果不传递 id 参数，当前显示的弹窗会被关闭。

2. 示例 1：点击按钮打开弹窗

假设你有一个按钮，点击后希望打开一个弹窗。你可以使用以下代码：

<button id="open-my-popup">打开弹窗</button>

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('open-my-popup').addEventListener('click', function() {
        elementorProFrontend.modules.popup.showPopup( { id: 123 } );
    });
});
</script>

在这个示例中，按钮 ID 为 open-my-popup。当按钮被点击时，通过 JavaScript 调用 Elementor 提供的 API 打开弹窗，弹窗的 ID 是 123。

3. 示例 2：页面加载后自动打开弹窗

如果你希望在页面加载后，自动打开弹窗，可以使用以下代码：

<script>
document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
        elementorProFrontend.modules.popup.showPopup( { id: 123 } );
    }, 3000); // 3秒后打开
});
</script>

在这个例子中，页面加载完成后，等待 3 秒钟（3000 毫秒），然后自动显示 ID 为 123 的弹窗。

4. 示例 3：关闭弹窗

有时候你可能需要通过代码关闭一个已经打开的弹窗。可以使用如下代码：

elementorProFrontend.modules.popup.closePopup( { id: 123 } );

如果你希望关闭当前正在显示的弹窗，也可以直接调用不带参数的版本：

elementorProFrontend.modules.popup.closePopup();

5. 使用短代码调用弹窗

如果你想在 WordPress 页面中随时使用 JavaScript 打开任意弹窗，可以创建一个简单的 短代码。这个短代码可以嵌入到任何页面或文章中，自动触发弹窗的显示。

步骤：

创建一个自定义短代码，通过 functions.php 文件添加以下代码：

function open_elementor_popup_shortcode($atts) {
    $atts = shortcode_atts( array(
        'popup_id' => '123',  // 默认弹窗 ID
    ), $atts, 'open_popup' );

    $popup_id = $atts['popup_id'];

    ob_start();
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        setTimeout(function() {
            elementorProFrontend.modules.popup.showPopup( { id: <?php echo $popup_id; ?> } );
        }, 3000); // 3秒后自动打开弹窗
    });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('open_popup', 'open_elementor_popup_shortcode');