How to Trigger Modal Using JavaScript

[Jetxpert-Envato]

#755506

Good Day!

We are currently using a plugin for inserting a banner at the top of our website called, WPFront Notification Bar.

The plugin allows you to use a button to perform a certain action. Button action can be triggered either with a URL or by using JavaScript. Click here for details.

Question: How can we trigger an existing modal we created (active and working in our website) using JavaScript? Our modal name is “ask_expert.” Modal details provided here.

We inserted code below (2 variations) in the JavaScript box of the plugin setting, but nothing happened. Any idea what we did wrong?

Variation 1:

$('ask_expert').modal('show');

Variation 2:

$('.ask_expert').modal('show');

[marklchaves]

#755553

Hi,

It looks like you are using the jQuery Modal library?

If so, the syntax would be something like this.

$("#ask_expert").modal({
  fadeDuration: 1000,
  fadeDelay: 0.50
});

Your selector should start with a # if you’re trying to select on an ID.

Live demo on CodePen.

Good luck!

[Jetxpert-Envato]

#755643

Hi Mark,

Thank you so much. Unfortunately, the code you provided did not work.

Modal ID confirmed first (click here), inserted your code in the “JavaSCript” box provided by the WPFront Notification Bar plugin (click here), refreshed cache, clicked on the button, and … nada.

I examined the banner button element to see if it adopted your code but, apparently, it didn’t like it (click here).

Can you think of any reason why the above didn’t work? In any case, we have reached out to the plugin developer to find out if there’s an issue with it not accepting JQuery commands. Perhaps his plugin doesn’t load the proper JQuery library?

Thank you! (will reach out to you offline next week)

[Jetxpert-Envato]

#755653

Update:

Well, got it to work using the JS code provided below. Unfortunately, the code only triggers the modal of the page it’s installed on. In other words (in our case), it only opens the modal on the homepage.

jQuery(document).ready(function () {jQuery('#ask_expert').modal('show')});

As previously suspected, jQuery had to be called first before the button action could work.

Based on the above, I inserted the modal element “ask_expert” on all other affected pages but it didn’t work. So, I guess I need a JS code that will trigger a modal located on another page.

Research continues. Almost there 🙂

[Jetxpert-Envato]

#756270

Success!

Problem solved. In short, here’s what we did to trigger a modal on all of our website pages using a banner containing a button.

(Note: The modals do not pop up automatically, something that’s quite annoying)

(1) Installed and activated the plugin, WPFront Notification Bar.

(2) Followed instructions (settings) provided by the plugin to set up our banner with a button.

(3) Inserted code below in the designated “Execute JavaScript” box provided in the plugin settings.

jQuery(document).ready(function () {jQuery('#<strong>mymodal</strong>').modal('show')});

(Note: mymodal is the name and ID entered in the designated Avada modal element fields, You can change mymodal to whatever name you like.)

(4) Placed our modal inside a container and saved it as Global (i.e., a global container)

(5) Added the saved global container to the bottom of each page of our website.

(Note: After adding the global container to your page(s), preview your pages to make sure nothing displays.)

(6) Customized the position and appearance of our modal using CSS code.

(7) Cleared all cache (local and global).

(8) Tested all pages to make sure everything works.

Special Notes:

(1) If using a cache plugin such as Optimizer or WP Rocket, do not defer JavaScript. Otherwise, when you click the button (to trigger the modal) it will not work or break the appearance of the modal.

(2) If the modal button action is not working (or partially working), make sure you haven’t blocked any scripts or styles in the back-end that are associated with the modal contents (i.e., gravity forms, Avada modal elements, jquery, etc.).

(3) If using a CDN such as Cloudflare, make sure it’s in Development Mode (or turned off) while performing the above steps.

[Jetxpert-Envato]

#756271

Errata:

The code provided in Step (3) above should be:

jQuery(document).ready(function () {jQuery('#mymodal').modal('show')});

Cheers!

[wellzi]

#851363

Hey @Jetxpert-Envato,

Is this still working for you? I have attempted this using a third party plug-in called “Buttonizer” and using the JavaScript method you’ve proposed it will not call my modal. As per your suggestions I have taken the following steps to try make it work on my site:

• I have a modal (“subscribeme”) in a global container
• Disabled LiteSpeed Cache to ensure no JS Defer scripts are running
• Used the code below

jQuery(document).ready(function () {jQuery('#subscribeme').modal('show')});

However it’s still not calling the modal. 🙁

[Jetxpert-Envato]

#852338

@wllzi,

Yes, it works. Above still applies with one small tweak. Try this code instead:

var ready=jQuery.noConflict();
jQuery(document).ready(function () {jQuery('#subscribeme').modal('show')});

Make sure your modal (Global Element) is added to the bottom of your affected pages.

Cheers!

[Jetxpert-Envato]

#852379

@wellzi,

Important: Make sure you’re not deferring jQuery (or jQuery-Core) via your cache plugins (e.g., WP Rocket, SG Optimizer, Autoptimize, Fast Velocity Minify, etc.) or by some other means. Otherwise, the above code will not work.

Cheers!

[Author]

Posts