open external link within a defined pop up window

Yes, that just worked an absolute treat. And again, thanks

Awesome. You are welcome, ??
Oh, one last thing: since we are using wp_enqueue_scripts to load jQuery anyway, it will definitely be “neater” to add the script that way too. It won’t make any difference in terms of functionality or outcome, but it would abide by best practices better.
To do that, you would need to:
1. Create a folder named js inside your theme folder, if it doesn’t already exist. If it does, just skip this step.
2. Create a lidget.js file in the js folder and paste this inside the file:

jQuery(window).load(function() {
	var width = "680", /* Enter popup window width here */
		height = "480", /* Enter popup window height here */
		menuItem = "menu-item-47", /* Enter menu item ID */
		target = "#"+menuItem+" a",
		hrefVal = jQuery(target).attr("href")
	;
	jQuery(target).attr({
		"href" : "#",
		"onclick" : "window.open('"+hrefVal+"','','width="+width+",height="+height+",scrollbars=no,resizable=no,location=no,menubar=no,toolbar=no')"
	});
	jQuery(".lidget-popup").attr("onclick", "window.open('"+hrefVal+"','','width="+width+",height="+height+",scrollbars=no,resizable=no,location=no,menubar=no,toolbar=no')");
});

3. Replace the entire old code you pasted in functions.php with this one:

function lidget_script_call() {
	wp_register_script('lidget_popup', get_stylesheet_directory_uri()."/js/lidget.js", array('jquery'), '', true);
	wp_enqueue_script('lidget_popup');
}
add_action('wp_enqueue_scripts', 'lidget_script_call');

That should do it. Have a good weekend!

I am looking over this code and trying to implement it as a “speed bump” for a banking institution website I am redesigning. https://www.texasautoguide.com/westex (click on the FB and Twitter Logo)

I like what I see and have it working with the exception of a few bugs.

1. On opening of my “speed bump” exit window it says New Garages. WHERE in the world is that text coming from?
2. Why does it open a new tab with the original index with a click of the link?
3. There is obviously some code in there that doesn’t need to be…

Any thoughts would be great! Thanks!

Rowdy

Hello there.
1. If you are using this code:

<a class="lidget-popup" title="New Garages" target="_blank" href="#">click here</a>

notice there’s a title attribute you would need to adjust or remove to fit your needs. Also, the code changed as we went along, and the latest version does use that line of code (just an FYI).
2. I don’t get your question. The code provided is for a pop up link…
3. What do you mean? It fit the OPs needs and was written for that purpose. Of course, if you want to give it another usage, you would need to make the necessary adjustments.

Haha! I found the New Garages text. Dooh!

Back to question 2. When you click on the link, the pop up opens and a new tab with the original index open at the same time.

Haha! I found the New Garages text. Dooh!

Glad you did.

When you say “original index”, are you referring to the url that appears in the address bar?

https://www.texasautoguide.com/westex/exit.html

That’s because the code was originally designed for an <a> tag, so the href attribute of the targeted link is set to “#” on page load, and then replaced.

Looking at the code again, I’m not sure what the purpose of this line is:

jQuery(".lidget-popup").attr("onclick", "window.open('"+hrefVal+"','','width="+width+",height="+height+",scrollbars=no,resizable=no,location=no,menubar=no,toolbar=no')");

Since it seems to do the exact same thing as the one before. Let me run some tests see if we can remove it.

Ok. So I removed the target and href tags and it does not open the # which is correct. Thanks for the help!

No pb. Glad I could help.
Also, just confirmed you can totally delete the line I mentioned:

jQuery(".lidget-popup").attr("onclick", "window.open('"+hrefVal+"','','width="+width+",height="+height+",scrollbars=no,resizable=no,location=no,menubar=no,toolbar=no')");

hello sir! your code is great and its working fine in my theme… but i want to use this for my 3 menus !

like : menu-item-542
menu-item-544
menu-item-546

please tell me how can i handle it?

my site is: Horizon Blanks
and i m using this popup window on my “compare” dropdown menu

I have currently one option to make 3 functions separately… but i don’t think so its good idea, how can i manage it in one function ?

@marventus – Thank you for your post. I used the first line on your solution and it worked. The only problem is when it opens the pop-up window, it also opens a new tab of the original page I was on. Is this in the code you provided or a config type setting in WP?

Thank you very much.