How to Trigger a Modal Popup on the Click of a Menu Element?

The Modal Popup widget of the Ultimate Addons for Elementor allows you to display a popup based on various actions. In this article we’ll see how to trigger a popup on the click of a WordPress Menu element. You can do this using a custom CSS class.

Here are a few steps you need to follow:

1. Create a new section and add a modal popup inside it. You can design the modal popup as per you requirements.

2. Open Display Settings of the Modal Popup widget. Select the Custom Class option from the dropdown menu.

Add your custom class name in the field as shown below.

3. Now go to your WordPress Dashboard -> Appearance -> Menu

4. Create a Custom Menu element on click of which you wish to trigger a popup.

4. Enable the CSS Classes option under the Screen Option settings

5. Add the respective CSS class name ( the one you entered in step 2 ) under the selected menu element.

Also select the location you wish to display the menu element on. Like we’ve selected Primary Menu in the screenshot below.

6. Trigger the Popup sitewide
By default, this popup is triggered only on a single page. If you wish to trigger this popup on the entire website, and make it work with all your themes, we will use the ‘wp_footer‘ hook with a PHP function. You can paste the following code into the functions.php file of your theme/child theme.

function ultimate_elementor_modal_popup() {
echo do_shortcode( '[uael-template id="your-saved-section-id"]' );
}
add_action('wp_footer', 'ultimate_elementor_modal_popup');

You just need to replace your-saved-section-id with the ID of your Saved Section that you created in Step 1. For steps to get your saved section ID, you can refer to our article about UAEL saved sections.

This assures that the modal popup you just created, will be displayed on all the pages of your website!