Is there anyway to have jquery BlockUI vertically center on the screen

Question

I am using jquery blockui but the div that is being covered is very long, so the loading message shows up off the screen.

Is there anyway to have jquery blockui loading message vertically center on the visible screen so people can see the message without scrolling down ?

Solution 1

blockUI by default displays in the center of the screen. And I believe it displays in the center even when you keep scrolling the page.

However you can set the below properties while calling blockUI.

centerX: true
centerY: true

Solution 2

Here is the definite answer.

Create this function:

$.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ($(window).height() - this.height()) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}

After you call blockUI, center the dialog window like this:

$('.blockUI.blockMsg').center();

Solution 3

Easily centered in the screen:

$.blockUI({
    message: myMessage,
    centerY: false,
    centerX: false,
    css:{
        position: 'fixed',
        margin: 'auto'
    }
});

Solution 4

I use css to center the blockUI. This works for both horizontal and vertical.
Note: you might want to remove default style from blockUI by using this $.blockUI.defaults.css = {};
Hope this helps.

.blockUI
{
    position: fixed;
    top: 50%; 
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);   /* IE 9 */
    -webkit-transform: translate(-50%, -50%);   /* Chrome, Safari, Opera */
}

Solution 5

But do you really need to cover the div? Maybe the blocking the whole page is better option?

Here is two different approaches:

1) Block the whole page

In this case you do not need any additional functionality and the message always will be in center.

$.blockUI({});

2) Block specific HTML element

But in case of the very long size of this element you have to do some extra work. First of all declare the method

$.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ($(window).height() - this.height()) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}

and then

$('.very-long-container').block({});

$('.blockUI.blockMsg').center();

JS Fiddle demo example that demonstrate both options here

View more solutions

Comments

[leora]

I don't think you are correct. It seems to display in the center of the blocked off content (not the center of the screen) - so if the blocked off section is larger than the screen the loading message will show up below the screen

[ShankarSangoli]

You must be calling calling on a particular section thats why it is just blocking that section.

[leora]

i am calling blockui over a div. that div has content that is very long but i want the loading message to just show at the center of the visible screen

[ShankarSangoli]

Try this $.blockUI({ message: "<br />Loading..<br /><br />" });.

[leora]

oh . . i think i see what you are saying . .basically don't use the div block ui and just use $.blockUI()

[aruno]

this is not correct. centerX and centerY only apply for element level blocking (see malsup.com/jquery/block/#element). In most demos the css applies (top: 40%) and since the content is only 1 line high it looks fine. See the image demo on this page malsup.com/jquery/block/#demos and you'll see the plugin author calculates top at time of display. but overall @oneiros's answer is probably most useful

[aruno]

... although you know what - after trying to get this to work for too long I've given up and switched to a proper modal dialog API : SimpleModal. BlockUI definitely has its place, but it's just not designed to be centering dialogs in the middle of windows

[Vishnu Y S]

This one works the best. For element level blocking, use position: 'absolute'.