How to customize the way it pops from a menu entry ?

Hi, if you mean using the popup window direct from a menu, this is what i am trying to do.

I can get the page up, but its the “page” not a pop up… need help.

Selecting POPUPS from the settings diesnt fix it.

Hey. I just got this working. It works because I have “schedule an appointment” and “contact us” buttons elsewhere on the page. What you need to do is add some jquery to stop the click event from the menu and then simulate a click even on the button/popbox you want.

This is the code I used for both menu links. I assigned IDs for the popbox buttons under the advanced tab so my selectors were reasonable. I would assume that this would work even if you hid the buttons off screen or under a slider/picture/whatever.

(function($) {
$(document).ready(function(){
$(“.menu-item-266”).click(function(){
event.preventDefault();
$( “#scheduleAppointmentButton > div > div.elementor-button-wrapper > a” ).trigger( “click” );
})

$(“.menu-item-267”).click(function(){
event.preventDefault();
$( “#contactUsButton > div > div.elementor-button-wrapper > a” ).trigger( “click” );
})
});
}(jQuery));

roadpaperweight , can you please post step by step how did you make it work? I want to use it for click on elementor image.

@roadpaperweight , can you please post step by step how did you make it work? I want to use it for click on elementor image.

Sure. There a a few things you need for this to work.

1. There must be a popbox button for your desired popbox somewhere on the page. It doesn’t have to be visible to the user, but it must exists.

2. You need to know the selectors of the popbox button.

3. You need to know the selector of the image you want to use.

4. You need to be able to add JS/Jquery to your website. It can be with a plugin or, depending on your theme, there may be a place to include it.

If you aren’t sure how to do this, add the popbox button to the bottom of your screen. In the advanced section of the popbox elementor widget, give the popbox button a css ID.

For the image you want to use, go to that elementor widget’s advanced section and give it a CSS ID as well.

You also want to give your image a link so the cursor shows that it is clickable, https://www.mysite.com/# will do.

Then it’s just Jquery.

(function($) {

$(document).ready(function(){

$(“#cssSelectorForYourImage”).click(function(){
event.preventDefault();
$( “#cssSelectorForYourPopBoxButton > div > div.elementor-button-wrapper > a” ).trigger( “click” );
})

});

}(jQuery));

I wanted to target the a in my popbox button. That is probably what you want to do as well. for me, the selector looked like this #cssSelectorForYourPopBoxButton > div > div.elementor-button-wrapper > a

After you get it working, if you don’t want the button to be seen by users, give your popbox button a z-index of zero and move it up behind your slider or some other big element on your site.

@roadpaperweight , thanks for getting back to me.
Not sure why its not woriking for me here is the site
https://finance.hellomill.com/
the image is “image1” popbox button is “learn more” button below it.
i see jquery code getting added to the script tag.

I am using “code snippet” plugin to add the jquery. here is the code i used :

function Image_Modal() {

?>
<script language=”JavaScript” type=”text/javascript”>

(function($) {

$(document).ready(function(){

$(“#cssSelectorForYourImage”).click(function(){
event.preventDefault();
$( “#cssSelectorForYourPopBoxButton > div > div.elementor-button-wrapper > a” ).trigger( “click” );
})

});

}(jQuery));

</script>
<?php

}

wp_enqueue_script(‘jquery’);
add_action(‘wp_head’, ‘Image_Modal’);

I added css id to image cssSelectorForYourImage and css id cssSelectorForYourPopBoxButton to popbox button. I added link to image. event.preventDefault() is not getting called instead the link is getting called upon click.

@roadpaperweight , works with below code and “code snippet plugin” thanks again.

add_action( ‘wp_head’, function () {
wp_enqueue_script( ‘jquery’ );

?>
<script>

(function($) {

$(document).ready(function(){

$(“#cssSelectorForYourImage”).click(function(){
event.preventDefault();
$( “#cssSelectorForYourPopBoxButton > div > div.elementor-button-wrapper > a” ).trigger( “click” );
})

});

}(jQuery));

</script>
<?php
} );