popup loaded from popmake('open') via URL-hash is invisible

If my first question was unclear, I’ll try to clarify. I’m trying to open a popup from a link that contains a hash. The idea is that you are taken to another page, where a popup opens. This popup will be triggered by the JavaScript in my last post, based on the hash in the URL on the new page.

The problem is that the popup loads but is transparent.. My theory is that my JavaScript is loading too soon, before the popup and the overlay are finished loading. What is the best way to make sure my js loads after the popups?

Your theory is right.

Try to use this code.

if(window.location.hash == "#simon") {
	function launch_simon(){
	$(document).ready(function(){
        document.getElementById("popmake-224").click();
        });
				}

	setTimeout("launch_simon()",2000)

}

@robotlove – @techbsl is close but the delay may cause issues. I am not sure doc.ready events will fire if not registered prior to doc.ready. So if the page loads before the 2 seconds are up may not trigger. This is more reliable.

$(document).ready(function() {
    if(window.location.hash === "#simon") {
        $('#popmake-224').popmake('open');
    }
});

Also our scripts don’t always run until doc ready. That depends on if they get triggered in the head or the footer.

@techbsl – Also document.getElementById("popmake-224").click(); won’t work because you don’t click the popup container itself to open it. You add a class matching its ID to anything and that will turn those elements into clickable triggers. Their triggers use the same $popup.popmake('open'); method.

Thanks for the tips. I ended up using the popmakeInit event which I found described here: https://wppopupmaker.com/docs/developer/overview-popup-maker-javascriptjquery-api/

The popup is triggered after popmakeInit, and it works perfectly.