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 ?

Bruner

Answer 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

Baumgardner

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 – Bruner

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

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 – Bruner

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

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

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 – Struck

... 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 – Struck

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

Boon

Answer 3

Easily centered in the screen:

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

Foreknowledge

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

Answer 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 */
}

Officialese

Answer 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

Lamas

Answer 6

This will center the message even if you resize the window:

$.blockUI({ 
         css: { 
                width: message_width + "px",
                height: message_height + "px",
                top: '50%',
                left: '50%',
                margin: (-message_height / 2) + 'px 0 0 '+ (-message_width/2) + 'px'
         },
         message: messageText
        });

Any how, centerX and centerY will not work when you are blocking the whole page, only effect element blocking.

Epigenous

Answer 7

I write a plugin for this jquery plugin. Well more to perfect.

Please notice how to gain the center of height.

/**
     * added by lijg.
     * refer: http://forum.jquery.com/topic/blockui-centering-the-dialog-window
     */
    (function(){
      function cp_props(inSrcObj, inDestObj, inOverride) {
        if (inDestObj == null) {
          return inSrcObj;
        }
        var prop;
        for (prop in inSrcObj) {
          if (inOverride || !inDestObj[prop]) {//先判断是否可以重写，true则不必在计算后面的值，false在计算后面时候存在这个属性。
            inDestObj[prop] = inSrcObj[prop];
          }
        }
        return inDestObj;
      }

      function _debug_info(container, aim){
        console.info("$(window).height():" + $(window).height() + ", $(window).width():" + $(window).width());
        console.info("$(window).scrollTop():" + $(window).scrollTop() + ", $(window).scrollLeft():" + $(window).scrollLeft());
        console.info("container.height():" + container.height() + ", container.width():" + container.width());
      }

      function center_of_dom(container, aim){
        //_debug_info(container, aim);
        container.css("position", "absolute");
        container.css("width", aim.width() + "px");
        container.css("height", aim.height() + "px");
        container.css("top", ( $(window).height() - container.height() ) / 2 + $(window).scrollTop() + "px");
        container.css("left", ( $(window).width() - container.width() ) / 2 + $(window).scrollLeft() + "px");
      }
      function center_of_x(container, aim){
        //_debug_info(container, aim);
        container.css("position", "absolute");
        container.css("width", aim.width() + "px");
        container.css("left", ( $(window).width() - container.width() ) / 2 + $(window).scrollLeft() + "px");
      }
      function center_of_y(container, aim){
        //_debug_info(container, aim);
        container.css("position", "absolute");
        container.css("height", aim.height() + "px");
        container.css("top", ( $(window).height() - container.height() ) / 2 + $(window).scrollTop() + "px");
      }

      $._blockUI = $.blockUI;
      $.blockUI = function(opts){
        if(! opts.onOverlayClick){
          opts.onOverlayClick = $.unblockUI;
        }

        $._blockUI(opts);//call blockUI

        var container = $('.blockUI.blockMsg');
        var aim = opts.message;
        if(opts.auto_center){
          center_of_dom(container, aim);//center it
          //center when resize
          $(window).resize(function() {
            center_of_dom(container, aim);
          });
        }else if(opts.auto_center_x){
          center_of_x(container, aim);//center it
          //center when resize
          $(window).resize(function() {
            center_of_x(container, aim);
          });
        }else if(opts.auto_center_y){
          center_of_y(container, aim);//center it
          //center when resize
          $(window).resize(function() {
            center_of_y(container, aim);
          });
        }

      };
      cp_props($._blockUI, $.blockUI, true);//cp properties

      //other methods
      $.blockUI.center_of_dom = center_of_dom;

    })();

Scavenge