如何通过代码触发 Elementor Popup答案

【问题标题】：How do you trigger Elementor Popup via code如何通过代码触发 Elementor Popup
【发布时间】：2020-12-08 09:52:45
【问题描述】：

这里有人用Elementor吗？你如何通过代码触发弹出窗口？例如。

function popup_call(){
    ...
    if(....){
        //trigger the popup here...
    } 
}

【问题讨论】：

标签： wordpress woocommerce hook hook-woocommerce elementor

【解决方案1】：

这个问题已经回答了：

// accessible on window.elementorProFrontend
elementorProFrontend.modules.popup.showPopup( { id: 123 } );

https://github.com/elementor/elementor/issues/7077#issuecomment-595570337

或尝试将弹出窗口绑定到按钮，使用 css 隐藏按钮

.yourbtn {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

并在 js (jquery) 中使用 click

 $('.yourbtn').click();

如果第二种方法对您有帮助，请不要忘记对屏幕阅读器隐藏按钮 aria-hidden="true" 和 tabindex="-1"

【讨论】：

问题是Uncaught TypeError: Cannot read property 'showPopup' of undefined。
另外，假设我做了第二种方法。那么我将如何在我的functions.php 下或通过代码触发该按钮？我有一个条件语句，它只会显示它是否为真。
在客户端（js）需要显示弹出窗口，function.php和服务器端在哪里？您是否查看了我在上面发送的链接并尝试了所有选项？
当使用 elementorProFrontend.modules.popup.showPopup( { id: 123 } );确保您已将弹出窗口可见性规则设置为包含您触发它的页面/整个页面。

【解决方案2】：

Elementor 的 Popup 需要注册和触发。 This 主题可能对您有所帮助。

使用wp_footer 挂钩来注册您的弹出窗口。

add_action( 'wp_footer', 'your_popup_function', 10, 5);
function your_popup_function(){
    
    if(..assuming your condition is true..){
        
        $popup_id = '2409'; //your Popup ID.
        ElementorPro\Modules\Popup\Module::add_popup_to_location( $popup_id ); //insert the popup to the current page

        ?><script>
        jQuery( document ).ready( function() { //wait for the page to load
            /* You can do more here, this will just show the popup on refresh of page, but hey this is JQuery so you can do more things here depending on your condition to trigger the popup */
            jQuery( window ).on( 'elementor/frontend/init', function() { //wait for elementor to load
                elementorFrontend.on( 'components:init', function() { //wait for elementor pro to load
                    elementorFrontend.documentsManager.documents[<?php echo $popup_id ;?>].showModal(); //show the popup
                } );
            } );
        } );
         </script>;
         <?php
    }
    
    return; //return nothing by default and do not show the popup.
 }

阅读 cmets 以获得更多说明。

【讨论】：

您好先生，我正在使用该代码，元素或弹出窗口出现但在几秒钟内消失了。
这是一个非常令人担忧的问题的一个非常好的开始 - elementor 在调用之前不会轻易隐藏弹出窗口的 html。当我单击前端的特定按钮时，我试图仅加载弹出 html。您是否有任何关于如何仅在按下特定按钮时才将弹出窗口加载到当前页面的建议，而不仅仅是出现在页面上？我们希望从页面中完全删除弹出 HTML，并且仅在按下特定类的按钮时才注入它。

【解决方案3】：

我不知道你为什么需要代码，如果你需要在点击时打开一个弹出窗口而不在浏览器底部显示 url（就像一个标签一样工作），试试“自定义类”。

【讨论】：

【解决方案4】：

对我来说，它与 Wordpress 5.7.2 和 elementor pro 3.2.1 一起工作

function popup_call(){
...
if(....){
    //trigger the popup here...
    echo"<script>  window.onload = function() {   
    elementorProFrontend.modules.popup.showPopup( {id:13000}, event);    }  
    </script>";
} 
  }

只需设置 ID

【讨论】：

【解决方案5】：

https://github.com/sukiwp/popup-trigger-url-for-elementor-pro

您需要将弹出窗口的显示条件设置设置为您希望弹出窗口显示的页面。否则，您的弹出窗口将不会显示。

【讨论】：