Response title
This is preview!
Improved BlockUI plugin script
in Using jQuery Plugins
•
7 years ago
I was recently working on a project where i needed to show a modal popover form, then when i needed to process the form show a waiting dialog on top of that in modal format. BlockUI didnt seem to support that feature when running in FULL page mode, so I made some mods. If this is helpful to anyone else feel free to adopt and improve upon it.
What was done:
A few new properties
// class name of the message block
blockMsgClass: 'blockMsg',
//override class of the backgroud
blockOverlayBackgroundClass: null,
//jquery object that you want the modal to append the container to. default is body, but if using asp.net postback may want form
appendContainer: null,
//this can be used so multiple blockUI can be show on top of each other (ie a modal form and then a wait dialog on submit) and then only unblock a specific one or all
uniqueName: null,
//this will allow of override of the CSS settings which try and center container based on px/%
forceCenterScreen: false
And one new method:
This allows for clearing all NON-UNIQUE modals from the screen if another one is being opened. the change really occurs in the selector for the elements
function clearNonUniqueBlocks(el, opts) {
var full = (el == window);
var $el = $(el);
var data = $el.data('blockUI.history');
var to = $el.data('blockUI.timeout');
if (to) {
clearTimeout(to);
$el.removeData('blockUI.timeout');
}
opts = $.extend({}, $.blockUI.defaults, opts || {});
bind(0, el, opts); // unbind events
if (opts.onUnblock === null) {
opts.onUnblock = $el.data('blockUI.onUnblock');
$el.removeData('blockUI.onUnblock');
}
var els;
if (full) // crazy selector to handle odd field errors in ie6/7
els = $('body').children().filter('.blockUI:not(.uniquesupplied)').add('body > .blockUI:not(.uniquesupplied)').add('form > .blockUI:not(.uniquesupplied)');
else
els = $('.blockUI:not(.uniquesupplied)', el);
if (full)
pageBlock = pageBlockEls = null;
if (opts.fadeOut) {
els.fadeOut(opts.fadeOut, function () { reset(els, data, opts, el); });
//bug
//setTimeout(function () { reset(els, data, opts, el); }, opts.fadeOut);
}
else
reset(els, data, opts, el);
};
the rest of the changes are easily found if you do a compare on the current release and this version listed below.
Example call:
This will leave the form open so another one can be called on top of it with similar calls.
$.blockUI({
message: $(".jqryeditcodeform"),
fadeIn: 0,
fadeOut: 0,
css: {
border: '0px',
width: '325px',
cursor: 'default'
},
blockOverlayBackgroundClass: 'modalBackground',
appendContainer: 'form:first',
uniqueName: 'jqryeditformblockui'
});
$.unblockUI({
fadeIn: 0,
fadeOut: 0,
appendContainer: 'form:first',
uniqueName: 'jqryeditformblockui'
});
New Code:
See attachment
Hope this helps someone else who needs multiple modal usage:
1