A super simple jQuery plugin for popup windows. Tested in IE7+, FF, Safari and Chrome.

Get the script via one of the methods below, and add it to your page after jQuery:

<script src="jquery.js"></script>
<script src="jquery.popupwindow.js"></script>

bower install jquery-popupwindow

Download the jquery.popupwindow.js file to your project.

$.popupWindow(url, [options]);

$.popupWindow('http://google.com');

By default this will open a 500x500 pixel window which is auto-centered and has minimal chrome.

$.popupWindow('http://www.google.com', { height: 300, width: 200 });

There are more examples to look at as well.

Some settings may not work in certain browsers. This is because new browsers allow the user to override any setting you pass to window.open.

For Firefox, open a new tab, go to about:config, then search for disable_window_open_feature to see the different overrides.

Most browsers will block popups created without user interaction (e.g. on page load). If the popup is blocked, your user may not notice the notification to allow them to see the pop up.

You should only create popups in the same event tick as a user interaction, such as a click. If you would like to do something without user interaction, I suggest a modal such as Bootstrap modals or jQuery UI Dialog.

Your popup will not be brought to the front if:

• if the user refreshes the primary webpage without closing the popup windows and
• and you go to show the popup again and
• your popup does not require user interaction and
• the URL does not pass the same origin policy.

Likewise, in Chrome (not Firefox), your popup will not be brought to the front if:

• if the user refreshes the primary webpage without closing the popup windows and
• and you go to show the popup again and
• your popup does not require user interaction and
• the URL does pass the same origin policy.

The quick fix again is to require user interaction. If you do this, regardless of the URL, it will bring the window to the front.

IE reports the primary monitor resolution. So, if you have multiple monitors IE will always return the resolution of the primary monitor. This is a bug, and there is an open ticket with IE. In Chrome and Firefox it returns the monitor that the browser is currently located on. If the browser spans multiple monitors, whichever monitor the browser has the most real estate on, is the monitor it returns the size for.

What this means to the end users:

If they have multiple monitors, their multiple monitors have different resolutions, they use Internet Explorer, the browser is currently located on a secondary monitor, and they have center set to 'screen' (the default), centering will not be perfect as it will be based on the primary monitor's resolution.

If you believe that could be your target audience, try using center: 'parent'.

Released under the MIT License.