isotropic-2022
Share
Blog
Search
Menu

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

By James LePage
 on December 24, 2020
Last modified on August 9th, 2022

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

By James LePage
 on December 24, 2020
Last modified on August 9th, 2022

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("urlparam=this") > -1) {
 document.querySelector('#modal_toggle').click();
  }
});
	
})( jQuery );Code language: JavaScript (javascript)

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.

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Wendy
3 years ago

Oooh... my mind is spinning with the possibilities

Ivan
Ivan
6 months ago

Hi James,
For some reason it is not working for me. Does it work with the latest Oxygen Builder?

Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of CodeWP.ai, a venture backed startup bringing AI to WordPress creators.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram