5

is anybody here using Elementor? How do you trigger the Popup via code? For example.

function popup_call(){
    ...
    if(....){
        //trigger the popup here...
    } 
}
Polar
  • 3,327
  • 4
  • 42
  • 77

5 Answers5

21

This question has already been answered:

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

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

or try to bind your popup to a button, hide the button with css

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

and use click with js (jquery)

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

If the second method helps you, do not forget to hide the button from screen readers aria-hidden="true" and tabindex="-1"

Unbywyd
  • 856
  • 1
  • 4
  • 8
  • Problem is it says `Uncaught TypeError: Cannot read property 'showPopup' of undefined`. – Polar Aug 19 '20 at 08:07
  • Also, let's say, I did the second method. Then how will I trigger that button under my `functions.php` or via code? I have a conditional statement where it will only show if its true. – Polar Aug 19 '20 at 08:19
  • 1
    Show the popup is required on the client side (js), where does the function.php and server side? Have you looked at the link that I sent above and tried all the options? – Unbywyd Aug 19 '20 at 08:56
  • When using elementorProFrontend.modules.popup.showPopup( { id: 123 } ); make sure you have set your popup visibility rule to include the page/entire page you are triggering it on. – Morten Bak Apr 13 '21 at 11:49
4

Elementor's Popup needs to be register and trigger. This topic might help you.

Use the wp_footer hook to register your popup.

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

Read the comments for more clarification.

Polar
  • 3,327
  • 4
  • 42
  • 77
  • hello sir, i am using that code, elementor popup appears but the vanished in seconds. – iqbal malik Jan 28 '21 at 15:21
  • 1
    This is a really great start to a very concerning issue - elementor doesn't make anything easy to hide the html of a popup until it is invoked. I am trying to only load the popup html when I click a specific button the front end. Do you have any suggesitons on how to load the popup to current page only when a specific button is pressed, not just being present on the page? We want to completely remove the popup HTML from the page and only inject it when a button of a specific class is pressed. – OldGreg Apr 27 '21 at 17:58
1

for me, it worked like this with Wordpress 5.7.2 and 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>";
} 
  }

Just set the ID

Sina Arzany
  • 53
  • 9
0

I don't know why you need code, if you need to open a pop up on click and without showing the url at the buttom of browser (works like an a tag), give "Custom Classes" a try.

mhdi
  • 90
  • 2
  • 11
0

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

You are required to set the Display Conditions settings of your popup to pages where you want the popup to show. Otherwise, your popup won't show up.

lon
  • 9
  • 1