{"id":5608,"date":"2020-06-04T20:38:31","date_gmt":"2020-06-04T20:38:31","guid":{"rendered":"https:\/\/the7kennisbank.nl\/?p=5608"},"modified":"2020-06-05T15:21:49","modified_gmt":"2020-06-05T15:21:49","slug":"how-to-trigger-a-modal-popup-on-the-click-of-a-menu-element-in-uavc-ultimate-addons","status":"publish","type":"post","link":"https:\/\/the7kennisbank.nl\/en\/ultimate-add-ons\/how-to-trigger-a-modal-popup-on-the-click-of-a-menu-element-in-uavc-ultimate-addons\/","title":{"rendered":"How to Trigger a Modal Popup on the Click of a Menu Element in UAVC? – Ultimate Addons"},"content":{"rendered":"

 <\/p>\n

\n

 <\/p>\n

\n
\n

How to Trigger a Modal Popup on the Click of a Menu Element in UAVC?<\/h1>\n

Docs<\/a> \u00bb General<\/a> \u00bb How to Trigger a Modal Popup on the Click of a Menu Element in UAVC?<\/strong><\/p>\n<\/div>\n<\/header>\n

\n

The Modal Box element of the UAVC allows you to display a popup based on various actions. In this article we\u2019ll see how to trigger a popup on the click of a WordPress Menu element. You can do this using a custom CSS class.<\/p>\n

Here are a few steps you need to follow:<\/p>\n

1. Create a new section and add a Modal Box inside it. You can design the modal popup<\/a> as per your requirements.<\/p>\n

2. Open General<\/strong>\u00a0tab of the Modal Box element. Select the Display Modal On<\/strong>\u00a0-> Selector<\/strong> option.<\/p>\n

Add your custom class name<\/strong> in the field as shown below.<\/p>\n<\/div>\n<\/div>\n

 <\/p>\n

\"\"<\/a><\/p>\n

\n
\n

3. Now go to your\u00a0WordPress Dashboard -> Appearance -> Menus<\/strong><\/p>\n

4. Create a Menu<\/strong> element on click of which you wish to trigger a popup.<\/p>\n

5. Enable the\u00a0CSS Classes<\/strong>\u00a0option under the\u00a0Screen Options<\/strong> settings.<\/p>\n

\"\"<\/a><\/p>\n

6. Add the respective CSS class name ( the one you entered in step 2 ) under the selected menu element.
\nAlso, select the location you wish to display the menu element on. Like we\u2019ve selected Primary Menu in the screenshot below.<\/p>\n

 <\/p>\n

\"\"<\/a><\/p>\n

 <\/p>\n

7. Open a page where you have used Modal Box and try to trigger the Popup from the menu item.<\/p>\n

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\u00a0work with all your\u00a0themes<\/strong>, follow the steps mentioned below.<\/p>\n

 <\/p>\n

1. Go to Ultimate Addons debug settings.<\/p>\n<\/div>\n<\/div>\n

\"\"<\/a><\/p>\n

\n
\n

2. Turn ON \u2013 Modal On Menu<\/strong> option.<\/p>\n<\/div>\n<\/div>\n

\"\"<\/a><\/p>\n

\n
\n

3. Paste the following code into the\u00a0functions.php\u00a0<\/strong>file of your theme\/child theme.<\/p>\n

<\/code><\/pre>\n
[pastacode lang=”php” manual=”function%20ultimate_VC_modal_popup()%20%7B%0Aecho%20do_shortcode(%20’%0A%0A’%20)%3B%0A%7D%0A%0Aadd_action(‘wp_footer’%2C%20’ultimate_VC_modal_popup’)%3B” message=”” highlight=”” provider=”manual”\/]<\/p>\n
<\/code><\/pre>\n
Please make sure you have added shortcode according to your requirement(The above shortocde is an example). Also, You just need to replace\u00a0your-saved-css-class\u00a0<\/strong>with the CSS class that you entered with Modal Popup Box in Step 1.<\/p>\n
This assures that\u00a0the modal popup you just created, will be displayed on all the pages of your website!<\/p>\n
 <\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
    How to Trigger a Modal Popup on the Click of a Menu Element in UAVC? Docs \u00bb General \u00bb How to Trigger a Modal Popup on the Click of a Menu Element in UAVC? The Modal Box element of the UAVC allows you to display a popup based on various actions. In this…<\/p>\n","protected":false},"author":2,"featured_media":5719,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[42,41],"tags":[],"class_list":["post-5608","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-knowledgebase-ultimate-add-ons","category-ultimate-add-ons","category-42","category-41","description-off"],"acf":[],"_links":{"self":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/5608","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/comments?post=5608"}],"version-history":[{"count":5,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/5608\/revisions"}],"predecessor-version":[{"id":5880,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/5608\/revisions\/5880"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/media\/5719"}],"wp:attachment":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/media?parent=5608"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/categories?post=5608"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/tags?post=5608"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}