JavaScript
Article

jQuery Cleanly Open Links in Popup Windows

By Sam Deering

Simple jQuery code snippet to add an event to all links with class .popup to open in a popup window instead of the current page or new tab/window. Specify the heights and widths as you please.

jQuery(document).ready(function($) {
	jQuery('a.popup').live('click', function(){
		newwindow=window.open($(this).attr('href'),'','height=200,width=150');
		if (window.focus) {newwindow.focus()}
		return false;
	});
});
  • http://kyoucode.com Austin

    Hi jquery4u,

    I found this script quite lightweight and useful. I was wondering if there was a way to not only open the link in the popup, but also center the popup? If not center, otherwise position the popup?

    Any help would be greatly appreciated.

  • jquery4u

    Hi Austin,

    Because window.open is a built in JavaScript method it doesn’t have positioning available (that i am aware).

    As you say this script is very lightweight so if you wanted more options for popup windows have a look here:

    http://www.jquery4u.com/jquery-windows-and-overlays/10-jquery-windows-overlays/

  • Razvan

    Yes, it does open the link in a new pop-up window, but it also opens it in the current page (link’s page). :( Why?

  • Gurumoorthi S

    http://phponwebsites.com is my blog. I want to create a link which is go to 2 link. one is opened in self and another is opened in new window. I done it. But i want the existing window with focus instead new window. My code is not working in firefox and chrome. Can you solve my proplem

  • http://w3responsive.com/ Javed Ur Rehman

    This piece of code is very helpful for me :) thanks Sam Deering great work.

    • http://jquery4u.com/ jQuery4u

      Your very welcome :)

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in JavaScript, once a week, for free.