코드를 통해 요소 또는 팝업을 트리거하는 방법

코드를 통해 요소 또는 팝업을 트리거하는 방법

여기 엘레멘터 쓰는 사람?코드를 통해 팝업을 트리거하는 방법은 무엇입니까?예를들면.

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

이 질문에 이미 답했습니다.

// 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"에서 단추를 숨기는 것을 잊지 마십시오.

Elementor의 팝업을 등록하고 트리거해야 합니다.이 항목은 도움이 될 것입니다.

wp_footer hook을 사용하여 팝업을 등록합니다.

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

자세한 설명을 위해 댓글을 읽어보세요.

저는 워드프레스 5.7.2와 element or 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>";
} 
  }

아이디만 설정하면 됩니다.

왜 코드가 필요한지 모르겠습니다. 클릭할 때 팝업을 열고 브라우저 하단에 URL을 표시하지 않고(태그처럼 작동) "Custom Classes"를 시도하십시오.

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

팝업을 표시할 페이지에 팝업의 Display Conditions(디스플레이 조건) 설정을 설정해야 합니다.그렇지 않으면 팝업이 표시되지 않습니다.

언급URL : https://stackoverflow.com/questions/63481717/how-do-you-trigger-elementor-popup-via-code