├── CHANGELOG.md
├── MIT-LICENSE
├── README.md
├── bower.json
├── example.html
└── jquery.popupwindow.js


/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | ## Unreleased
 2 | 
 3 | - Added MIT license
 4 | - Added jQuery dependency to bower.json
 5 | 
 6 | ## 1.0.1
 7 | 
 8 | - Added bower.json
 9 | 
10 | ## 1.0.0
11 | 
12 | - Initial release
13 | 


--------------------------------------------------------------------------------
/MIT-LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2011-2014 Mark Dodwell
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining
 4 | a copy of this software and associated documentation files (the
 5 | "Software"), to deal in the Software without restriction, including
 6 | without limitation the rights to use, copy, modify, merge, publish,
 7 | distribute, sublicense, and/or sell copies of the Software, and to
 8 | permit persons to whom the Software is furnished to do so, subject to
 9 | the following conditions:
10 | 
11 | The above copyright notice and this permission notice shall be
12 | included in all copies or substantial portions of the Software.
13 | 
14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # jQuery Popup Window Plugin
  2 | 
  3 | [![Bower version](https://badge.fury.io/bo/jquery-popupwindow.png)](http://badge.fury.io/bo/jquery-popupwindow)
  4 | 
  5 | A super simple jQuery plugin for popup windows. Tested in IE7+, FF, Safari and
  6 | Chrome.
  7 | 
  8 | ## Installation
  9 | 
 10 | Get the script via one of the methods below, and add it to your page after
 11 | jQuery:
 12 | 
 13 | ```html
 14 | <script src="jquery.js"></script>
 15 | <script src="jquery.popupwindow.js"></script>
 16 | ```
 17 | 
 18 | ### Bower
 19 | 
 20 | ```bash
 21 | bower install jquery-popupwindow
 22 | ```
 23 | 
 24 | ### Manual
 25 | 
 26 | Download the [`jquery.popupwindow.js`][script] file to your project.
 27 | 
 28 | [script]: https://github.com/mkdynamic/jquery-popupwindow/raw/master/jquery.popupwindow.js
 29 | 
 30 | ## Basic usage
 31 | 
 32 | ```javascript
 33 | $.popupWindow(url, [options]);
 34 | ```
 35 | 
 36 | | argument   | type   | description                     |
 37 | |------------|--------|---------------------------------|
 38 | | `url`      | string | *Required* URL to open popup to |
 39 | | `options`  | object | *Optional*                      |
 40 | 
 41 | ### Simple example
 42 | 
 43 | ```javascript
 44 | $.popupWindow('http://google.com');
 45 | ```
 46 | 
 47 | By default this will open a 500x500 pixel window which is auto-centered and has
 48 | minimal chrome.
 49 | 
 50 | ### Example with options
 51 | 
 52 | ```javascript
 53 | $.popupWindow('http://www.google.com', { height: 300, width: 200 });
 54 | ```
 55 | 
 56 | ### More examples
 57 | 
 58 | There are more [examples] to look at as well.
 59 | 
 60 | [examples]: https://github.com/mkdynamic/jquery-popupwindow/blob/master/example.html
 61 | 
 62 | ## Options
 63 | 
 64 | | option       | type     | default | notes |
 65 | |--------------|----------|---------|-------|
 66 | | `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 |
 67 | | `createNew`  | boolean  | `true`  | open a new window, or re-use existing popup |
 68 | | `height`     | integer  | `500`   |       |
 69 | | `left`       | integer  | `0`     |       |
 70 | | `location`   | boolean  | `false` |       |
 71 | | `menubar`    | boolean  | `false` |       |
 72 | | `name`       | string   | `null`  | specify custom name for window (overrides createNew option) |
 73 | | `onUnload`   | function | `null`  | callback when window closes |
 74 | | `resizable`  | boolean  | `false` |       |
 75 | | `scrollbars` | boolean  | `false` | safari always adds scrollbars |
 76 | | `status`     | boolean  | `false` |       |
 77 | | `toolbar`    | boolean  | `false` |       |
 78 | | `top`        | integer  | `0`     |       |
 79 | | `width`      | integer  | `500`   |       |
 80 | 
 81 | ## Notes
 82 | 
 83 | ### Settings not working
 84 | 
 85 | Some settings may not work in certain browsers. This is because new browsers
 86 | allow the user to override any setting you pass to `window.open`.
 87 | 
 88 | For Firefox, open a new tab, go to `about:config`, then search for
 89 | `disable_window_open_feature` to see the different overrides.
 90 | 
 91 | ### Popup blocked
 92 | 
 93 | Most browsers will block popups created *without* user interaction (e.g. on
 94 | page load). If the popup is blocked, your user may not notice the notification
 95 | to allow them to see the pop up.
 96 | 
 97 | You should only create popups in the same event tick as a user interaction,
 98 | such as a click. If you would like to do something without user interaction, I
 99 | suggest a modal such as [Bootstrap modals] or [jQuery UI Dialog].
100 | 
101 | [Bootstrap modals]: http://getbootstrap.com/javascript/#modals
102 | [jQuery UI Dialog]: http://jqueryui.com/dialog/
103 | 
104 | ### Same origin
105 | 
106 | Your popup will not be brought to the front if:
107 | 
108 |   - if the user refreshes the primary webpage without closing the popup windows
109 |     *and*
110 |   - and you go to show the popup again *and*
111 |   - your popup does not require user interaction *and*
112 |   - the URL **does not** pass the same origin policy.
113 | 
114 | 
115 | Likewise, in Chrome (not Firefox), your popup will not be brought to the front
116 | if:
117 | 
118 |   - if the user refreshes the primary webpage without closing the popup windows
119 |     *and*
120 |   - and you go to show the popup again *and*
121 |   - your popup does not require user interaction *and*
122 |   - the URL **does** pass the same origin policy.
123 | 
124 | The quick fix again is to require user interaction. If you do this, regardless
125 | of the URL, it will bring the window to the front.
126 | 
127 | ### Mutliple monitors support: Internet Explorer
128 | 
129 | IE reports the primary monitor resolution. So, if you have multiple monitors IE
130 | will *always* return the resolution of the primary monitor. This is a bug, and
131 | there is an [open ticket with IE][ticket]. In Chrome and Firefox it returns the
132 | monitor that the browser is currently located on. If the browser spans multiple
133 | monitors, whichever monitor the browser has the most real estate on, is the
134 | monitor it returns the size for.
135 | 
136 | What this means to the end users:
137 | 
138 | If they have multiple monitors, their multiple monitors have different
139 | resolutions, they use Internet Explorer, the browser is currently located on a
140 | secondary monitor, and they have `center` set to `'screen'` (the default),
141 | centering will not be perfect as it will be based on the primary monitor's
142 | resolution.
143 | 
144 | If you believe that could be your target audience, try using `center:
145 | 'parent'`.
146 | 
147 | [ticket]: https://connect.microsoft.com/IE/feedback/details/856470/ie11-javascript-screen-height-still-gives-wrong-value-on-secondary-monitor
148 | 
149 | ## License
150 | 
151 | Released under the MIT License.
152 | 
153 | [![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/mkdynamic/jquery-popupwindow/trend.png)](https://bitdeli.com/free "Bitdeli Badge")
154 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "jquery-popupwindow",
 3 |   "version": "1.0.1",
 4 |   "main": "jquery.popupwindow.js",
 5 |   "description": "Simple jQuery plugin for popup windows",
 6 |   "dependencies" : {
 7 |     "jquery" : ">=1.3.2"
 8 |   },
 9 |   "ignore": [
10 |     "example.html"
11 |   ]
12 | }
13 | 


--------------------------------------------------------------------------------
/example.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 5 |     <title>jQuery Popup Window &mdash; Example</title>
 6 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
 7 |     <script src="jquery.popupwindow.js"></script>
 8 |     <script>
 9 |       $(function() {
10 |         $('.example-defaults').on('click', function(event) {
11 |           event.preventDefault();
12 |           $.popupWindow('http://google.com');
13 |         });
14 | 
15 |         $('.example-small').on('click', function(event) {
16 |           event.preventDefault();
17 |           $.popupWindow('http://google.com', {
18 |             width: 200,
19 |             height: 200
20 |           });
21 |         });
22 | 
23 |         $('.example-callback').on('click', function(event) {
24 |           event.preventDefault();
25 |           $.popupWindow('http://google.com', {
26 |             onUnload: function() {
27 |               alert('Window closed!');
28 |             }
29 |           });
30 |         });
31 | 
32 |         $('a.center-screen').on('click', function(event) {
33 |           event.preventDefault();
34 |           $.popupWindow('http://google.com', {
35 |               width: 400,
36 |               height: 400,
37 |               center: 'screen'
38 |           });
39 |         });
40 | 
41 |         $('a.center-parent').on('click', function(event) {
42 |           event.preventDefault();
43 |           $.popupWindow('http://google.com', {
44 |               width: 400,
45 |               height: 400,
46 |               center: 'parent'
47 |           });
48 |         });
49 |       });
50 |     </script>
51 |   </head>
52 | 
53 |   <body>
54 |     <h1>jQuery Popup Window Plugin</h1>
55 | 
56 |     <h2>Examples</h2>
57 | 
58 |     <ul>
59 |       <li><a href="#" class="example-defaults">Open window (with defaults)</a></li>
60 |       <li><a href="#" class="example-small">Open window (custom size: 200x200)</a></li>
61 |       <li><a href="#" class="example-callback">Open window (close callback)</a></li>
62 |       <li><a href="#" class="center-screen">Open window (centered on screen)</a></li>
63 |       <li><a href="#" class="center-parent">Open window (centered on parent)</a></li>
64 |     </ul>
65 | 
66 |     <h2>More Details</h2>
67 | 
68 |     <p>
69 |       See <a
70 |         href="https://github.com/mkdynamic/jquery-popupwindow">https://github.com/mkdynamic/jquery-popupwindow</a>
71 |       for more details.
72 |     </p>
73 |   </body>
74 | </html>
75 | 


--------------------------------------------------------------------------------
/jquery.popupwindow.js:
--------------------------------------------------------------------------------
 1 | /*!
 2 | * Display popup window.
 3 | *
 4 | * Requires: jQuery v1.3.2
 5 | */
 6 | (function($) {
 7 |   var defaults = {
 8 |     center:      "screen", //true, screen || parent || undefined, null, "", false
 9 |     createNew:   true,
10 |     height:      500,
11 |     left:        0,
12 |     location:    false,
13 |     menubar:     false,
14 |     name:        null,
15 |     onUnload:    null,
16 |     resizable:   false,
17 |     scrollbars:  false, // os x always adds scrollbars
18 |     status:      false,
19 |     toolbar:     false,
20 |     top:         0,
21 |     width:       500
22 |   };
23 | 
24 |   $.popupWindow = function(url, opts) {
25 |     var options = $.extend({}, defaults, opts);
26 | 
27 |     // center the window
28 |     if (options.center === "parent") {
29 |       options.top = window.screenY + Math.round(($(window).height() - options.height) / 2);
30 |       options.left = window.screenX + Math.round(($(window).width() - options.width) / 2);
31 |     } else if (options.center === true || options.center === "screen") {
32 |       // 50px is a rough estimate for the height of the chrome above the
33 |       // document area
34 |       
35 |       // take into account the current monitor the browser is on
36 |       // this works in Firefox, Chrome, but in IE there is a bug 
37 |       // https://connect.microsoft.com/IE/feedback/details/856470/ie11-javascript-screen-height-still-gives-wrong-value-on-secondary-monitor
38 | 
39 |       // IE reports the primary monitor resolution. So, if you have multiple monitors IE will
40 |       // ALWAYS return the resolution of the primary monitor. This is a bug, and there is an
41 |       // open ticket with IE for it. In chrome and firefox it returns the monitor that the
42 |       // browser is currently located on. If the browser spans multiple monitors, whichever
43 |       // monitor the browser has the most real estate on, is the monitor it returns the size for.
44 | 
45 |       // What this means to the end users:
46 |       // If they have multiple monitors, and their multiple monitors have different resolutions,
47 |       // and they use internet explorer, and the browser is currently located on a secondary
48 |       // monitor, the centering will not be perfect as it will be based on the primary monitors
49 |       // resolution. As you can tell this is pretty edge case.
50 |       var screenLeft = (typeof window.screenLeft !== 'undefined') ? window.screenLeft : screen.left;
51 |       
52 |       options.top = ((screen.height - options.height) / 2) - 50;
53 |       options.left = screenLeft + (screen.width - options.width) / 2;
54 |     }
55 | 
56 |     // params
57 |     var params = [];
58 |     params.push('location=' + (options.location ? 'yes' : 'no'));
59 |     params.push('menubar=' + (options.menubar ? 'yes' : 'no'));
60 |     params.push('toolbar=' + (options.toolbar ? 'yes' : 'no'));
61 |     params.push('scrollbars=' + (options.scrollbars ? 'yes' : 'no'));
62 |     params.push('status=' + (options.status ? 'yes' : 'no'));
63 |     params.push('resizable=' + (options.resizable ? 'yes' : 'no'));
64 |     params.push('height=' + options.height);
65 |     params.push('width=' + options.width);
66 |     params.push('left=' + options.left);
67 |     params.push('top=' + options.top);
68 | 
69 |     // open window
70 |     var random = new Date().getTime();
71 |     var name = options.name || (options.createNew ? 'popup_window_' + random : 'popup_window');
72 |     var win = window.open(url, name, params.join(','));
73 | 
74 |     // unload handler
75 |     if (options.onUnload && typeof options.onUnload === 'function') {
76 |       var unloadInterval = setInterval(function() {
77 |         if (!win || win.closed) {
78 |           clearInterval(unloadInterval);
79 |           options.onUnload();
80 |         }
81 |       }, 50);
82 |     }
83 | 
84 |     // focus window
85 |     if (win && win.focus) {
86 |       win.focus();
87 |     }
88 | 
89 |     // return handle to window
90 |     return win;
91 |   };
92 | })(jQuery);
93 | 


--------------------------------------------------------------------------------