Is there anyway to keep jquery BlockUI vertically centered on the screen

Question

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

Is there anyway to let the jquery blockui message load vertically on the visible screen so that people can see the message without scrolling down?

Answer 1

blockUI is displayed in the center of the screen by default. And I believe that it is displayed in the center, even if you continue to scroll through the page.

However, you can set the following properties when calling blockUI .

 centerX: true centerY: true 

Answer 2

Here is a 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 calling blockUI, center the dialog as follows:

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

Answer 3

Easy to center on screen:

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

Answer 4

I am using css for the blockUI center. This works both horizontally and vertically.
Note: you can remove the default style from blockUI 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

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 way, centerX and centerY will not work, when you block the entire page, it blocks only the effect element.

Answer 6

But do you really need to cover the div? Maybe it's best to block the entire page?

Here are two different approaches:

1) Block the whole page

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

 $.blockUI({}); 

2) Block a specific HTML element

But in the case of a very large size of this element, you need to do extra work. First declare a 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 demonstrating both options here

Answer 7

I am writing a plugin for this jquery plugin. Well, even better.

Pay attention to how to get 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;

     }) ();