Any alternative to blockUI for jQuery?

Question

The question says it all! I am looking for an easy to use alternative of blockUI for jQuery. I've been trying for days to center a dialog box with blockUI in both FireFox and IE but no chance. It doesn't work. I looked at this question about centering a blockUI dialog box (How can I get a DIV to centre on a page using jQuery and blockUI?) but it works only with Firefox.

Kirwan

Answer 1

For dialog boxes, I have switched from blockUI to Jquery UI. I think it's better.

Whitewood

Just make sure you get your css / jquery ui theme correct or you'll still be able to click the background of the page :) – Disclaim

Answer 2

you might want to check this plugin call jQuery MSG. It works great in most of the browsers including ie6. And it is very light weight, only 4k uncompressed with code comments.

Example code

// this will block the page and shows a `please wait` message
$.msg();

// you can change the content by the following code
$.msg({
  content : '<img src="loading.gif"/> Sending mail :)'
});

Demo page

Source code on github

Full documentation and usage please check this post

or if you just want to centralize some DOM element you can take a look at this jQuery Center plugin

Theatricalize

this plugin does support blocking of elements. It just puts overlay to whole window – Reste

Answer 3

Here's an extension which I came across and modified slightly. Looking at it now, I think it's actually a bit messy and could use a clean up (there's some unused variables I think)

$.fn.vCenter = function(options) {
    var pos = {
        sTop : function() {
            return window.pageYOffset || $.boxModel && document.documentElement.scrollTop || document.body.scrollTop;
        },
        wHeight : function() {
            if ($.browser.opera || ($.browser.safari && parseInt($.browser.version) > 520)) {
                return window.innerHeight - (($ (document).height() > window.innerHeight) ? getScrollbarWidth() : 0);
            } else if ($.browser.safari) {
                return window.innerHeight;
            } else {
                return $.boxModel && document.documentElement.clientHeight || document.body.clientHeight;
            }
        }
    };
    return this.each(function(index) {
        if (index == 0) {
            var $this = $(this),
                $w = $(window),
                topPos = ($w.height() - $this.height()) / 2 + $w.scrollTop()
            ;
            if (topPos < 0 && (options == undefined || !options.allowNegative)) topPos = 0;
            $this.css({
                position: 'absolute',
                marginTop: '0',
                top: topPos //pos.sTop() + (pos.wHeight() / 2) - (elHeight / 2)
            });
        }
    });
};
$.fn.hCenter = function(options) {
    return this.each(function(index) {
        if (index == 0) {
            var $this = $(this),
                $d = $(document),
                leftPos = ($d.width() - $this.width()) / 2 + $d.scrollLeft()
            ;
            if (leftPos < 0 && (options == undefined || !options.allowNegative)) leftPos = 0;
            $this.css({
                position: "absolute",
                left: leftPos
            });
        }
    });
};
$.fn.hvCenter = function(options) {
    return this.vCenter(options).hCenter(options);
};

Usage:

$('#verticalCenter').vCenter();
$('#horizontalCenter').hCenter();
$('#bothCentered').hvCenter();

Accuse

Note this uses jQuery.browser which was removed in jQuery 1.9 – Recede

Answer 4

In case the problem is caused by loading the dimensions plugin along with the latest version of jQuery, then Dimensions was merged into the core a few versions ago and was causing a conflict.

Ordonez

Answer 5

From the documentation:

Why don't I see overlays in FF on Linux?

Several people informed me that full page opacity rendering in FF/Linux is crazy slow, so by default it's disabled for that platform. You can enable it by overriding the applyPlatformOpacityRules property like this:

// enable transparent overlay on FF/Linux 
$.blockUI.defaults.applyPlatformOpacityRules = false;

Pottle