Question

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

有没有将jquery blockui加载消息垂直居中放在可见屏幕上，以便人们可以看到消息而不向下滚动？

Answer 1

创建此功能：

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

调用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.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）阻止整个页面

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

OrderedDict

2）阻止特定的HTML元素

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

def scoreGen(input_dict):
    def keyfunc(name):
        x, y = input_dict[name] # these variables should really be given better names!
        return gauss(x, math.sqrt(y))

    return sorted(input_dict, key=keyfunc, reverse=True)

然后

$.blockUI({});

JS Fiddle演示示例演示了两个选项here

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插件编写了一个插件。更完美。

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

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

    })();

反正有没有jquery BlockUI垂直居中在屏幕上

7 个答案: