jQuery Popup Window Plugin
A super simple jQuery plugin for popup windows. Tested in IE7+, FF, Safari and Chrome.
Installation
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
bower install jquery-popupwindowManual
Download the jquery.popupwindow.js file to your project.
Basic usage
$.popupWindow(url, [options]);| argument | type | description |
|---|---|---|
url | string | Required URL to open popup to |
options | object | Optional |
Simple example
$.popupWindow('http://google.com');By default this will open a 500x500 pixel window which is auto-centered and has minimal chrome.
Example with options
$.popupWindow('http://www.google.com', { height: 300, width: 200 });More examples
There are more examples to look at as well.
Options
| option | type | default | notes |
|---|---|---|---|
center | string | 'screen' | possible values are: 'screen','parent', and null. For backwards compatibility true/false is still supported, but deprecated, and may be removed in a future version |
createNew | boolean | true | open a new window, or re-use existing popup |
height | integer | 500 | |
left | integer | 0 | |
location | boolean | false | |
menubar | boolean | false | |
name | string | null | specify custom name for window (overrides createNew option) |
onUnload | function | null | callback when window closes |
resizable | boolean | false | |
scrollbars | boolean | false | safari always adds scrollbars |
status | boolean | false | |
toolbar | boolean | false | |
top | integer | 0 | |
width | integer | 500 |
Notes
Settings not working
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.
Popup blocked
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.
Same origin
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.
Mutliple monitors support: Internet Explorer
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'.
License
Released under the MIT License.
