Skip to content

Documentation

Extensive Documentation for PowerPack & WooPack to help you with common questions and issues.

PowerPack

  1. Home
  2. Docs
  3. PowerPack
  4. Modules
  5. Modal / Popup Box
  6. How to trigger a Modal Popup on the click of a Menu Element?

How to trigger a Modal Popup on the click of a Menu Element?

With the PowerPack Beaver Builder Addon’s Modal Popup module, you can display a popup when a user clicks on a menu element sitewide. You can use this feature to show a popup when the user clicks on a menu element.

Here are the steps to do the same:

Step 1: Add a new row and drag and drop the Modal popup module inside it.

Step 2: Toggle to the Settings tab, now select the Trigger as “Other” and copy the CSS Class from there. Now, save the Modal Box Module by clicking on the “Save As…” button and give it a proper name.

Step 3: Go to WP Admin area > Appearance > Menus. Here first enable the CSS Class name from the screen options.

Step 4: Add the respective class name (the one you copied in step 2) in the selected menu element.

 

Step 5: Now we need to embed the Modal Popup sitewide. To do that, we will be using the “wp_footer” hook with the PHP function. Just paste the following code into the functions.php file of your theme/ child theme.

Only change you need to make on the above code is you need to change the saved-module-slug text with the slug name of the Saved Module Template.

Once everything is done, your modal box popup will begin to display on all the pages of your website!

Was this article helpful to you? Yes 1 No 8
×