├── README.md
├── blockUI.jquery.json
├── bower.json
├── composer.json
└── jquery.blockUI.js
/README.md:
--------------------------------------------------------------------------------
1 | # BlockUI - Page or element overlay
2 |
3 | ## Getting Started
4 | Download either the [production version][min] or the [development version][max] of BlockUI.
5 |
6 | [min]: http://malsup.github.com/min/jquery.blockUI.min.js
7 | [max]: http://malsup.github.com/jquery.blockUI.js
8 |
9 | In your web page:
10 |
11 |
12 | <!-- include jQuery -->
13 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
14 | <!-- include BlockUI -->
15 | <script src="http://path/to/your/copy/of/jquery.blockUI.js"></script>
16 | <script>
17 | // invoke blockUI as needed -->
18 | $(document).on('click', '#myButton', function() {
19 | $.blockUI();
20 | });
21 | ></script>
22 |
23 |
24 | ## Documentation, Demos and FAQ
25 | Everything you need to know can be found here:
26 | [http://jquery.malsup.com/block/](http://jquery.malsup.com/block/)
27 |
28 |
29 | ## Copyright and License
30 | Copyright © 2007-2013 M. Alsup.
31 |
32 | The BlockUI plugin is dual licensed under the [MIT](http://malsup.github.com/mit-license.txt) and [GPL](http://malsup.github.com/gpl-license-v2.txt) licenses.
33 |
34 | You may use either license. The MIT license is recommended for most projects because it is simple and easy to understand and it places almost no restrictions on what you can do with the plugin.
35 |
36 | If the GPL suits your project better you are also free to use the plugin under that license.
37 |
38 | You do not have to do anything special to choose one license or the other and you don't have to notify anyone which license you are using. You are free to use the BlockUI plugin in commercial projects as long as the copyright header is left intact.
39 |
--------------------------------------------------------------------------------
/blockUI.jquery.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "blockUI",
3 | "title": "BlockUI",
4 | "description": "Simulate synchronous ajax by blocking - not locking - the UI. This plugin lets you block user interaction with the page or with a specific element on the page. Also great at displaying modal dialogs.",
5 | "keywords": [
6 | "block",
7 | "overlay",
8 | "dialog",
9 | "modal"
10 | ],
11 | "version": "2.70.0-2014.11.23",
12 | "author": {
13 | "name": "M. Alsup",
14 | "url": "http://jquery.malsup.com"
15 | },
16 | "licenses": [
17 | {
18 | "type": "MIT",
19 | "url": "http://malsup.github.com/mit-license.txt"
20 | },
21 | {
22 | "type": "GPL",
23 | "url": "http://malsup.github.com/gpl-license-v2.txt"
24 | }
25 | ],
26 | "bugs": "https://github.com/malsup/blockui/issues",
27 | "homepage": "http://jquery.malsup.com/block/",
28 | "docs": "http://jquery.malsup.com/block/",
29 | "download": "http://malsup.github.com/jquery.blockUI.js",
30 | "dependencies": {
31 | "jquery": ">=1.7"
32 | }
33 | }
34 |
35 |
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "blockUI",
3 | "title": "BlockUI",
4 | "description": "Simulate synchronous ajax by blocking - not locking - the UI. This plugin lets you block user interaction with the page or with a specific element on the page. Also great at displaying modal dialogs.",
5 | "keywords": [
6 | "block",
7 | "overlay",
8 | "dialog",
9 | "modal"
10 | ],
11 | "version": "2.70",
12 | "author": {
13 | "name": "M. Alsup",
14 | "url": "http://jquery.malsup.com"
15 | },
16 | "licenses": [
17 | {
18 | "type": "MIT",
19 | "url": "http://malsup.github.com/mit-license.txt"
20 | },
21 | {
22 | "type": "GPL",
23 | "url": "http://malsup.github.com/gpl-license-v2.txt"
24 | }
25 | ],
26 | "bugs": "https://github.com/malsup/blockui/issues",
27 | "homepage": "http://jquery.malsup.com/block/",
28 | "docs": "http://jquery.malsup.com/block/",
29 | "download": "http://malsup.github.com/jquery.blockUI.js",
30 | "dependencies": {
31 | "jquery": ">=1.7"
32 | },
33 | "main": "jquery.blockUI.js"
34 | }
35 |
--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "components/jquery-blockui",
3 | "description": "Simulate synchronous ajax by blocking - not locking - the UI. This plugin lets you block user interaction with the page or with a specific element on the page. Also great at displaying modal dialogs.",
4 | "keywords": [
5 | "block",
6 | "overlay",
7 | "dialog",
8 | "modal"
9 | ],
10 | "license": ["MIT", "GPL"],
11 | "type": "component",
12 | "homepage": "http://jquery.malsup.com/block/",
13 | "authors": [
14 | {
15 | "name": "M. Alsup",
16 | "homepage": "http://jquery.malsup.com"
17 | }
18 | ],
19 | "require": {
20 | "robloach/component-installer": "*",
21 | "components/jquery": ">=1.7"
22 | },
23 | "extra": {
24 | "component": {
25 | "scripts": [
26 | "jquery.blockUI.js"
27 | ],
28 | "shim": {
29 | "deps": [
30 | "jquery"
31 | ]
32 | }
33 | }
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/jquery.blockUI.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * jQuery blockUI plugin
3 | * Version 2.70.0-2014.11.23
4 | * Requires jQuery v1.7 or later
5 | *
6 | * Examples at: http://malsup.com/jquery/block/
7 | * Copyright (c) 2007-2013 M. Alsup
8 | * Dual licensed under the MIT and GPL licenses:
9 | * http://www.opensource.org/licenses/mit-license.php
10 | * http://www.gnu.org/licenses/gpl.html
11 | *
12 | * Thanks to Amir-Hossein Sobhi for some excellent contributions!
13 | */
14 |
15 | ;(function() {
16 | /*jshint eqeqeq:false curly:false latedef:false */
17 | "use strict";
18 |
19 | function setup($) {
20 | $.fn._fadeIn = $.fn.fadeIn;
21 |
22 | var noOp = $.noop || function() {};
23 |
24 | // this bit is to ensure we don't call setExpression when we shouldn't (with extra muscle to handle
25 | // confusing userAgent strings on Vista)
26 | var msie = /MSIE/.test(navigator.userAgent);
27 | var ie6 = /MSIE 6.0/.test(navigator.userAgent) && ! /MSIE 8.0/.test(navigator.userAgent);
28 | var mode = document.documentMode || 0;
29 | var setExpr = $.isFunction( document.createElement('div').style.setExpression );
30 |
31 | // global $ methods for blocking/unblocking the entire page
32 | $.blockUI = function(opts) { install(window, opts); };
33 | $.unblockUI = function(opts) { remove(window, opts); };
34 |
35 | // convenience method for quick growl-like notifications (http://www.google.com/search?q=growl)
36 | $.growlUI = function(title, message, timeout, onClose) {
37 | var $m = $('');
38 | if (title) $m.append(''+title+'
');
39 | if (message) $m.append(''+message+'
');
40 | if (timeout === undefined) timeout = 3000;
41 |
42 | // Added by konapun: Set timeout to 30 seconds if this growl is moused over, like normal toast notifications
43 | var callBlock = function(opts) {
44 | opts = opts || {};
45 |
46 | $.blockUI({
47 | message: $m,
48 | fadeIn : typeof opts.fadeIn !== 'undefined' ? opts.fadeIn : 700,
49 | fadeOut: typeof opts.fadeOut !== 'undefined' ? opts.fadeOut : 1000,
50 | timeout: typeof opts.timeout !== 'undefined' ? opts.timeout : timeout,
51 | centerY: false,
52 | showOverlay: false,
53 | onUnblock: onClose,
54 | css: $.blockUI.defaults.growlCSS
55 | });
56 | };
57 |
58 | callBlock();
59 | var nonmousedOpacity = $m.css('opacity');
60 | $m.mouseover(function() {
61 | callBlock({
62 | fadeIn: 0,
63 | timeout: 30000
64 | });
65 |
66 | var displayBlock = $('.blockMsg');
67 | displayBlock.stop(); // cancel fadeout if it has started
68 | displayBlock.fadeTo(300, 1); // make it easier to read the message by removing transparency
69 | }).mouseout(function() {
70 | $('.blockMsg').fadeOut(1000);
71 | });
72 | // End konapun additions
73 | };
74 |
75 | // plugin method for blocking element content
76 | $.fn.block = function(opts) {
77 | if ( this[0] === window ) {
78 | $.blockUI( opts );
79 | return this;
80 | }
81 | var fullOpts = $.extend({}, $.blockUI.defaults, opts || {});
82 | this.each(function() {
83 | var $el = $(this);
84 | if (fullOpts.ignoreIfBlocked && $el.data('blockUI.isBlocked'))
85 | return;
86 | $el.unblock({ fadeOut: 0 });
87 | });
88 |
89 | return this.each(function() {
90 | if ($.css(this,'position') == 'static') {
91 | this.style.position = 'relative';
92 | $(this).data('blockUI.static', true);
93 | }
94 | this.style.zoom = 1; // force 'hasLayout' in ie
95 | install(this, opts);
96 | });
97 | };
98 |
99 | // plugin method for unblocking element content
100 | $.fn.unblock = function(opts) {
101 | if ( this[0] === window ) {
102 | $.unblockUI( opts );
103 | return this;
104 | }
105 | return this.each(function() {
106 | remove(this, opts);
107 | });
108 | };
109 |
110 | $.blockUI.version = 2.70; // 2nd generation blocking at no extra cost!
111 |
112 | // override these in your code to change the default behavior and style
113 | $.blockUI.defaults = {
114 | // message displayed when blocking (use null for no message)
115 | message: 'Please wait...
',
116 |
117 | title: null, // title string; only used when theme == true
118 | draggable: true, // only used when theme == true (requires jquery-ui.js to be loaded)
119 |
120 | theme: false, // set to true to use with jQuery UI themes
121 |
122 | // styles for the message when blocking; if you wish to disable
123 | // these and use an external stylesheet then do this in your code:
124 | // $.blockUI.defaults.css = {};
125 | css: {
126 | padding: 0,
127 | margin: 0,
128 | width: '30%',
129 | top: '40%',
130 | left: '35%',
131 | textAlign: 'center',
132 | color: '#000',
133 | border: '3px solid #aaa',
134 | backgroundColor:'#fff',
135 | cursor: 'wait'
136 | },
137 |
138 | // minimal style set used when themes are used
139 | themedCSS: {
140 | width: '30%',
141 | top: '40%',
142 | left: '35%'
143 | },
144 |
145 | // styles for the overlay
146 | overlayCSS: {
147 | backgroundColor: '#000',
148 | opacity: 0.6,
149 | cursor: 'wait'
150 | },
151 |
152 | // style to replace wait cursor before unblocking to correct issue
153 | // of lingering wait cursor
154 | cursorReset: 'default',
155 |
156 | // styles applied when using $.growlUI
157 | growlCSS: {
158 | width: '350px',
159 | top: '10px',
160 | left: '',
161 | right: '10px',
162 | border: 'none',
163 | padding: '5px',
164 | opacity: 0.6,
165 | cursor: 'default',
166 | color: '#fff',
167 | backgroundColor: '#000',
168 | '-webkit-border-radius':'10px',
169 | '-moz-border-radius': '10px',
170 | 'border-radius': '10px'
171 | },
172 |
173 | // IE issues: 'about:blank' fails on HTTPS and javascript:false is s-l-o-w
174 | // (hat tip to Jorge H. N. de Vasconcelos)
175 | /*jshint scripturl:true */
176 | iframeSrc: /^https/i.test(window.location.href || '') ? 'javascript:false' : 'about:blank',
177 |
178 | // force usage of iframe in non-IE browsers (handy for blocking applets)
179 | forceIframe: false,
180 |
181 | // z-index for the blocking overlay
182 | baseZ: 1000,
183 |
184 | // set these to true to have the message automatically centered
185 | centerX: true, // <-- only effects element blocking (page block controlled via css above)
186 | centerY: true,
187 |
188 | // allow body element to be stetched in ie6; this makes blocking look better
189 | // on "short" pages. disable if you wish to prevent changes to the body height
190 | allowBodyStretch: true,
191 |
192 | // enable if you want key and mouse events to be disabled for content that is blocked
193 | bindEvents: true,
194 |
195 | // be default blockUI will supress tab navigation from leaving blocking content
196 | // (if bindEvents is true)
197 | constrainTabKey: true,
198 |
199 | // fadeIn time in millis; set to 0 to disable fadeIn on block
200 | fadeIn: 200,
201 |
202 | // fadeOut time in millis; set to 0 to disable fadeOut on unblock
203 | fadeOut: 400,
204 |
205 | // time in millis to wait before auto-unblocking; set to 0 to disable auto-unblock
206 | timeout: 0,
207 |
208 | // disable if you don't want to show the overlay
209 | showOverlay: true,
210 |
211 | // if true, focus will be placed in the first available input field when
212 | // page blocking
213 | focusInput: true,
214 |
215 | // elements that can receive focus
216 | focusableElements: ':input:enabled:visible',
217 |
218 | // suppresses the use of overlay styles on FF/Linux (due to performance issues with opacity)
219 | // no longer needed in 2012
220 | // applyPlatformOpacityRules: true,
221 |
222 | // callback method invoked when fadeIn has completed and blocking message is visible
223 | onBlock: null,
224 |
225 | // callback method invoked when unblocking has completed; the callback is
226 | // passed the element that has been unblocked (which is the window object for page
227 | // blocks) and the options that were passed to the unblock call:
228 | // onUnblock(element, options)
229 | onUnblock: null,
230 |
231 | // callback method invoked when the overlay area is clicked.
232 | // setting this will turn the cursor to a pointer, otherwise cursor defined in overlayCss will be used.
233 | onOverlayClick: null,
234 |
235 | // don't ask; if you really must know: http://groups.google.com/group/jquery-en/browse_thread/thread/36640a8730503595/2f6a79a77a78e493#2f6a79a77a78e493
236 | quirksmodeOffsetHack: 4,
237 |
238 | // class name of the message block
239 | blockMsgClass: 'blockMsg',
240 |
241 | // if it is already blocked, then ignore it (don't unblock and reblock)
242 | ignoreIfBlocked: false
243 | };
244 |
245 | // private data and functions follow...
246 |
247 | var pageBlock = null;
248 | var pageBlockEls = [];
249 |
250 | function install(el, opts) {
251 | var css, themedCSS;
252 | var full = (el == window);
253 | var msg = (opts && opts.message !== undefined ? opts.message : undefined);
254 | opts = $.extend({}, $.blockUI.defaults, opts || {});
255 |
256 | if (opts.ignoreIfBlocked && $(el).data('blockUI.isBlocked'))
257 | return;
258 |
259 | opts.overlayCSS = $.extend({}, $.blockUI.defaults.overlayCSS, opts.overlayCSS || {});
260 | css = $.extend({}, $.blockUI.defaults.css, opts.css || {});
261 | if (opts.onOverlayClick)
262 | opts.overlayCSS.cursor = 'pointer';
263 |
264 | themedCSS = $.extend({}, $.blockUI.defaults.themedCSS, opts.themedCSS || {});
265 | msg = msg === undefined ? opts.message : msg;
266 |
267 | // remove the current block (if there is one)
268 | if (full && pageBlock)
269 | remove(window, {fadeOut:0});
270 |
271 | // if an existing element is being used as the blocking content then we capture
272 | // its current place in the DOM (and current display style) so we can restore
273 | // it when we unblock
274 | if (msg && typeof msg != 'string' && (msg.parentNode || msg.jquery)) {
275 | var node = msg.jquery ? msg[0] : msg;
276 | var data = {};
277 | $(el).data('blockUI.history', data);
278 | data.el = node;
279 | data.parent = node.parentNode;
280 | data.display = node.style.display;
281 | data.position = node.style.position;
282 | if (data.parent)
283 | data.parent.removeChild(node);
284 | }
285 |
286 | $(el).data('blockUI.onUnblock', opts.onUnblock);
287 | var z = opts.baseZ;
288 |
289 | // blockUI uses 3 layers for blocking, for simplicity they are all used on every platform;
290 | // layer1 is the iframe layer which is used to supress bleed through of underlying content
291 | // layer2 is the overlay layer which has opacity and a wait cursor (by default)
292 | // layer3 is the message content that is displayed while blocking
293 | var lyr1, lyr2, lyr3, s;
294 | if (msie || opts.forceIframe)
295 | lyr1 = $('');
296 | else
297 | lyr1 = $('');
298 |
299 | if (opts.theme)
300 | lyr2 = $('');
301 | else
302 | lyr2 = $('');
303 |
304 | if (opts.theme && full) {
305 | s = '';
306 | if ( opts.title ) {
307 | s += '';
308 | }
309 | s += '
';
310 | s += '