Link to Modal Popup Content

Jonathan,

I found your question about linking directly to the content within a CodeLights modal while trying to find the same answer for a client site. I haven’t found any pre-built methods for this functionality, but I have managed to script my own solution. I’m sharing it here in case anyone else requires linking directly to modal content.

The script below implements the small GetUrlVars gist from GitHub user Kaioe, available at: https://gist.github.com/kaioe/8401201

In my implementation, I placed two CodeLights popup shortcodes into a footer widget area to popup the site’s Privacy Policy and Terms of Use. The footer widgets load on all pages, so appending the querystring to any URL within the site will trigger the popup on page load.

Load the script below on every page from which you want to allow this triggering method, either through enqueue via functions.php or from a per-page header/footer script plugin (Note: <script></script> tags may or may not be needed depending upon your chosen implementation):

<script>
jQuery(document).ready(function() {
	// Trigger Codelights Modal Popups from querystring

	// Get the value of the querysting parameter you chose for triggering
	var terms = getUrlVars()["terms"];

	switch (terms) {
		// Trigger opening Terms of Use modal if value is "use"
		case "use":
			jQuery(".footer-widgets .cl-popup:nth-of-type(1) .cl-popup-trigger").trigger("click");
			break;

		// Trigger opening Terms of Privacy Policy modal if value is "policy"
		case "policy":
			jQuery(".footer-widgets .cl-popup:nth-of-type(2) .cl-popup-trigger").trigger("click");
			break;

		// Default to do nothing
		default:
			break;
	}
});

// Gather any querystring parameters
function getUrlVars() {
	var vars = [], hash;
	var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
	for(var i = 0; i < hashes.length; i++)
	{
		hash = hashes[i].split('=');
		vars.push(hash[0]);
		vars[hash[0]] = hash[1];
	}
	return vars;
}
</script>

The individual cases in the switch statement can use any valid jQuery selector to reference the popup trigger element. I inspected the page from my frontend to determine which element to target. In my case, since I only had two modals, using .cl-popup:nth-of-type(1) or :nth-of-type(2) was the simplest approach.

With the above script running on my pages, I can trigger the modal popup from a link structured as such:

https://www.mydomain.com/page/?terms=policy

or

https://www.mydomain.com/page/?terms=use

You can see the effect in action on the site I built for my client (in progress):

https://peachfest.nettechdata.com/?terms=policy

Hope this snippet is helpful!

Best Regards,

Josef