你如何通过代码触发 Elementor Popup

Question

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

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

Answer 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)

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

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

Answer 2

Elementor 的 Popup 需要注册并触发。这个主题可能对您有帮助。

使用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.
 }

阅读评论以获取更多说明。