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 ?

Answer 1

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();

Answer 2

Easily centered in the screen:

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

Answer 3

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