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 ?

score 10 · Answer 1 · edited Apr 03 '13 at 12:05

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

score 7 · Answer 2 · answered Nov 19 '15 at 21:26

7

Easily centered in the screen:

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

answered Nov 19 '15 at 21:26

David

2,942
33
16

This one works the best. For element level blocking, use `position: 'absolute'`. – Vishnu Y S Apr 24 '18 at 10:23

score 1 · Answer 3 · edited Oct 19 '15 at 10:36

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

Mr. Pumpkin · Answer 4 · 2015-12-10T22:25:39.707

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

score 1 · Accepted Answer · answered Feb 05 '12 at 02:57

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

answered Feb 05 '12 at 02:57

ShankarSangoli

69,612
13
93
124

2

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 – leora Feb 05 '12 at 03:00
You must be calling calling on a particular section thats why it is just blocking that section. – ShankarSangoli Feb 05 '12 at 03:16
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 – leora Feb 05 '12 at 03:17
Try this `$.blockUI({ message: "
Loading..

" });`. – ShankarSangoli Feb 05 '12 at 03:20
oh . . i think i see what you are saying . .basically don't use the div block ui and just use $.blockUI() – leora Feb 05 '12 at 03:21
this is not correct. `centerX` and `centerY` only apply for element level blocking (see http://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 http://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 – Simon_Weaver Dec 19 '14 at 05:06
... 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 – Simon_Weaver Dec 19 '14 at 05:44

score 0 · Answer 6 · edited Oct 19 '15 at 11:03

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.

score -1 · Answer 7 · edited Oct 19 '15 at 11:36

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;

    })();

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

7 Answers7