Jquery way to simple popup window

One thing cool about Jquery is the ability to access an element based on class or id attribute and handle events without attaching the traditional onClick, onSubmit events on the element.

 

We examine a simple way for providing a link that will open in a popup window using Jquery.

 

Below is the code in a page. The Jquery function is added in the html page, but in real applications we may want to segregate it in a JS file. 

<script type="text/javascript" src="/static/jquery-1.3.1.js"></script>
 
<script type="text/javascript">
	$(document).ready( function() {
		$("a.home").click(
		function() {
			var href= $(this).attr("href");
			var arrHref = href.split("|");
			window.open(arrHref[0], "PopUp", arrHref[1])
			return false;
		});
	});
</script>
 
<a href="http://www.tech-freaks.com|toolbar=0,menubar=0,width=800,height=700,scrollbars=1"
class="home">Home Page</a>

 

See how the href attribute is used to pass other window configuration attributes. The Jquery splits by the delimiter (|) and calls the popup function. This provides amazing configuration ability, although the function looks big compared to our traditional popup. The a href tag is clean with no onclick function which is a plus. 

 

The only downside a developer unaware of Jquery may be confused on how that href attribute is able to generate a popup window.