有没有让jquery BlockUI垂直居中显示在屏幕上

Question

我使用的是jquery blockui，但所覆盖的div非常长，因此加载消息显示在屏幕外。

有没有办法让jqueryblockui在可见屏幕上垂直居中加载消息，这样人们就可以在不向下滚动的情况下看到消息？

Answer 1

这是明确的答案。

创建此功能：

$.fn.center=函数（）{this.css（"position"、"absolute"）；this.css（"top"，（$（window）.height（）this.height（））/2+$（window）.sollTop（）+"px"）；this.css（"left"，（$（window）.width（）-this.width（））/2+$（windows）.sollLeft（）+"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将块UI居中。这适用于水平和垂直。
注意：您可能希望使用此$.blockUI.defaults.css = {};从blockUI中删除默认样式
希望这能有所帮助。

.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）{if（inDestObj==null）{return inSrcObj；}var道具；的（在inSrcObj中的道具）{if（inOverride||！inDestObj[prop]）{//先判断是否可以重写，真的则不必在计算后面的值，虚假的在计算后面时候存在这个属性。inDestObj[pro]=inSrcObj[prop]；}}return inDestObj；}函数_debug_info（容器，目标）{console.info（"$（window）.height（）："+$（window.）.heith（）+"，$（window）.width（）："+$（windows）.widh（）"）；console.info（"$（window）.scrollTop（）："+$（windows）.scroll Top（）+"，$（window）.scrowlLeft（）：；console.info（"container.height（）："+container.height（）+"，container.width（）："+container.width（））；}函数中心_of_dom（容器，目标）{//_debug_info（容器，目标）；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）.sollTop（）+"px"）；container.css（"left"，（$（window）.width（）-container.width（））/2+$（windows）.sollLeft（）+"px"）；}函数中心_of_x（容器，目标）{//_debug_info（容器，目标）；container.css（"position"、"absolute"）；container.css（"width"，aim.width（）+"px"）；container.css（"left"，（$（window）.width（）-container.width（））/2+$（windows）.sollLeft（）+"px"）；}函数中心_of_y（容器，目标）{//_debug_info（容器，目标）；container.css（"position"、"absolute"）；container.css（"height"，aim.height（）+"px"）；container.css（"top"，（$（window）.height（）-container.height（））/2+$（window）.sollTop（）+"px"）；}$_blockUI=$.blockUI；$.blockUI=函数（opts）{if（！opts.onOverlayClick）{opts.onOverlayClick=$.ulockUI；}$_blockUI（opts）//调用blockUIvar容器=$（'.blockUI.blockMsg'）；var aim=opts.message；if（opts.auto_center）{center_of_dom（容器，目标）//居中//调整大小时居中$（window）.resize（function）{center_of_dom（容器，目标）；})；}否则if（opts.auto_center_x）{center_of_x（集装箱，瞄准）//居中//调整大小时居中$（window）.resize（function）{center_of_x（集装箱，瞄准）；})；}否则if（opts.auto_center_y）{center_of_y（容器，目标）//居中//调整大小时居中$（window）.resize（function）{center_of_y（容器，目标）；})；}}；cp_props（$_blockUI，$.blockUI，true）//cp属性//其他方法$.blockUI.center_of_dom=center_of_dom；})（）；