A Simple Popup Window Using jQuery

There is a whole UX conversation to be had about pop‑up windows, and against newer modal implementations, a literal new window can look a little outdated. Nevertheless, they do still have their uses ‑ for instance, if you sign into a website using your Google account or your Facebook details, the login screen will likely have opened in a popup window ‑ primarily because, in that way, Facebook or Google can keep tighter control on security versus code embedded into somebody else's page.

The distinction between pop‑up windows and modals is fairly straightforward: a modal appears as an element within a webpage rather than as an all‑new and separate browser window, often displaying a different site altogether.

These popup windows are different to popup modals, as popup modals are typically more integrated within the page itself; retaining design aesthetic and functionality, even for things like the close button, whereas a popup window relies on whatever browser or OS interface the visiting user is using.

Making a popup window with jQuery is surprisingly straightforward and easy; here's a simple code snippet that can be used to trigger a popup window when a link is clicked upon:

$('#link').click(function (e) {  e.preventDefault();  var url = $(this).attr('href');  window.open(url, 'popup', 'width=600,height=600');  return false;});

In this snippet, we use jQuery to set an event listener on the click event for a link with the ID link, and then use preventDefault to avoid the default event from triggering (which would just move the user on to the page that the link points to).

After that, we extract the href attribute out into a variable, before using window.open with parameters to open a new 600px x 600px window, with the URL we stored from the href attribute earlier. Finally, we end with return false to terminate the function and free up the thread for other work to happen. Easy!

At this point, I feel it is also important to say that you don't need jQuery for this at all; if, like me, you are already working in an environment that includes it, then, by all means, go ahead. Otherwise, this snippet will achieve exactly the same thing without having to import a 100kb framework:

document.getElementById('link').addEventListener('click', function (e) {  e.preventDefault();  var url = e.getAttribute('href');  window.open(url, 'popup', 'width=600,height=600');  return false;});

As you'll see, the two code snippets are almost identical. The important factor in both is the use of window.open, a JavaScript window method which allows us to define a new window, with a specific URL (url in the examples above), in a specified context (popup), and with specific features (in this instance, we're setting the new window dimensions to 600px square).