jquery - 无论如何让jquery BlockUI在屏幕上垂直居中

Question

我正在使用jquery blockui，但被覆盖的 div 很长，因此加载消息显示在屏幕外。

无论如何让jquery blockui在可见屏幕上垂直加载消息，这样人们就可以在不向下滚动的情况下看到消息？

Answer 1

这是肯定的答案。

创建这个函数：

$.fn.center = 函数 () {
    this.css("位置","绝对");
    this.css("top", ($(window).height() - this.height()) / 2+$(window).scrollTop() + "px");
    this.css("left", ($(window).width() - this.width()) / 2+$(window).scrollLeft() + "px");
    返回这个；
}

调用 blockUI 后，将对话窗口居中，如下所示：

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

Answer 2

在屏幕中轻松居中：

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

Answer 3

blockUI默认显示在屏幕中央。而且我相信即使您继续滚动页面，它也会显示在中心。

但是，您可以在调用时设置以下属性blockUI。

centerX: true
centerY: true

Answer 4

我使用 css 使 blockUI 居中。这适用于水平和垂直。
注意：您可能希望使用此方法从 blockUI 中删除默认样式$.blockUI.defaults.css = {};
希望这会有所帮助。

.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

但是你真的需要覆盖 div 吗？也许阻止整个页面是更好的选择？

这是两种不同的方法：

1) 屏蔽整个页面

在这种情况下，您不需要任何附加功能，并且消息始终位于中心。

$.blockUI({});

2) 阻止特定的 HTML 元素

但是如果这个元素的尺寸很长，你必须做一些额外的工作。首先声明方法

$.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;
}

进而

$('.very-long-container').block({});

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

在这里演示这两个选项的 JS Fiddle 演示示例

Answer 6

即使您调整窗口大小，这也会使消息居中：

$.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
        });

无论如何，当您阻塞整个页面centerX时centerY将不起作用，只会影响元素阻塞。

Answer 7

我为这个 jquery 插件写了一个插件。更完美。

请注意如何获得高度中心。

/**
     * 由 lijg 添加。
     * 参考：http://forum.jquery.com/topic/blockui-centering-the-dialog-window
     */
    （功能（）{
      函数cp_props（inSrcObj，inDestObj，inOverride）{
        如果（inDestObj == null）{
          返回 inSrcObj;
        }
        变种道具；
        for（inSrcObj 中的道具）{
          if in || !inObj[prop] {/ 属性判断是否可以计算出最合适的值，true 那么这个必然在计算后面，false 在计算后面的时候存在。
            inDestObj[prop] = inSrcObj[prop];
          }
        }
        返回 inDestObj;
      }

      功能_debug_info（容器，目标）{
        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());
      }

      功能 center_of_dom（容器，目标）{
        //_debug_info(容器，目标);
        container.css("位置", "绝对");
        container.css("宽度", 目标宽度() + "px");
        container.css("高度", 目标高度() + "px");
        container.css("top", ($(window).height() - container.height()) / 2 + $(window).scrollTop() + "px");
        container.css("left", ($(window).width() - container.width()) / 2 + $(window).scrollLeft() + "px");
      }
      功能 center_of_x（容器，目标）{
        //_debug_info(容器，目标);
        container.css("位置", "绝对");
        container.css("宽度", 目标宽度() + "px");
        container.css("left", ($(window).width() - container.width()) / 2 + $(window).scrollLeft() + "px");
      }
      功能 center_of_y（容器，目标）{
        //_debug_info(容器，目标);
        container.css("位置", "绝对");
        container.css("高度", 目标高度() + "px");
        container.css("top", ($(window).height() - container.height()) / 2 + $(window).scrollTop() + "px");
      }

      $._blockUI = $.blockUI;
      $.blockUI = 功能（选择）{
        if(!opts.onOverlayClick){
          opts.onOverlayClick = $.unblockUI;
        }

        $._blockUI(opts);//调用blockUI

        var 容器 = $('.blockUI.blockMsg');
        var 目标 = opts.message;
        如果（opts.auto_center）{
          center_of_dom(container, aim);//居中
          //调整大小时居中
          $(窗口).resize(函数() {
            center_of_dom（容器，目标）；
          });
        }否则如果（opts.auto_center_x）{
          center_of_x(容器, 目标);//居中
          //调整大小时居中
          $(窗口).resize(函数() {
            center_of_x（容器，目标）；
          });
        }否则如果（opts.auto_center_y）{
          center_of_y(容器, 目标);//居中
          //调整大小时居中
          $(窗口).resize(函数() {
            center_of_y（容器，目标）；
          });
        }

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

      //其他方法
      $.blockUI.center_of_dom = center_of_dom;

    })();