Есть ли в любом случае jquery BlockUI вертикально по центру экрана

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

Но вам действительно нужно покрывать 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 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

blockUI по умолчанию отображается в центре экрана. И я считаю, что он отображается в центре, даже если вы продолжаете прокручивать страницу.

Однако вы можете установить следующие свойства при вызове blockUI.

centerX: true
centerY: true

Answer 6

Я пишу плагин для этого плагина 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;

    })();

Answer 7

Это будет центрировать сообщение, даже если вы измените размер окна:

$.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 не будут работать, когда вы блокируете всю страницу, блокирует только элемент.