Support » Plugin: Sidebar Widgets by CodeLights » Link to Modal Popup Content

  • Hi

    I have several modal popups on our special offers page.

    Is it possible to link to the content of a popup (i.e the link goes to the special offers page and opens the relevant popup)?

    Cheers
    Jonathan

Viewing 1 replies (of 1 total)
  • 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:

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

    or

    http://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

Viewing 1 replies (of 1 total)
  • The topic ‘Link to Modal Popup Content’ is closed to new replies.