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

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

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

Answer 3

Easily centered in the screen:

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

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

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

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.

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;

    })();