Quick And Dirty Way To Toggle An Oxygen Builder Modal Based On URL Parameter

Published: 9 months ago

If you need a quick and easy way to toggle and Oxygen Builder modal on what a URL contains, use the code and steps in this article.

First, here's what this code does. Say your URL contains the parameter example.com/?toggle-modal=yes. We're going to set up a simple code block that will toggle a modal to pop up if the url contains that text.

First, add a code box and button to your page. Note the buttons ID, then go to Advanced -> Layout, and hide it.

Now, go to the modal, select the trigger type "show when user clicks element", and paste in the button id.

Make a code block (anywhere on the page works), and paste this code into the JS section.

(function($) { 
 $(document).ready(function() {
     if (window.location.href.indexOf("URL-Paramater") > -1) {
 document.querySelector('#buttonID').click();
     }
   });
 })( jQuery );

Essentially, it sees that your url contains the parameter needed to toggle the modal, and clicks the (hidden) button, triggering the modal to pop up.

This is great if you're redirecting visitors to a page, sending them from an email, or just want to toggle an Oxygen Builder modal from a URL Paramater.

Join Our Newsletter
Here's what you get: A once a week newsletter that contains original content, aggregated posts, WordPress deals, and anything else we think you'd like. We don't spam or sell your email address. Unsub at any time.
Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Wendy
8 months ago

Oooh... my mind is spinning with the possibilities

IsoGroup- Web Dev/Design, WordPress and More

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

Join Our Newsletter
Over 4,000 Design Lovers and Problem Solvers.

Author

A relationship driven website creation company.

Connect

© ISOTROPIC, LLC 2016-2021
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram