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("左", ( $(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

しかし、本当にdivをカバーする必要がありますか? おそらく、ページ全体をブロックする方が良いオプションでしょうか?

2 つの異なるアプローチを次に示します。

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 5

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 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
     */
    （関数（）{
      function cp_props(inSrcObj, inDestObj, inOverride) {
        if (inDestObj == null) {
          inSrcObj を返します。
        }
        var プロップ;
        for (inSrcObj のプロップ) {
          if (inOverride || !inDestObj[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("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");
      }
      関数center_of_x（コンテナ、目的）{
        //_debug_info(コンテナ、目的);
        container.css("位置", "絶対");
        container.css("width", aim.width() + "px");
        container.css("left", ( $(window).width() - container.width() ) / 2 + $(window).scrollLeft() + "px");
      }
      関数center_of_y（コンテナ、目的）{
        //_debug_info(コンテナ、目的);
        container.css("位置", "絶対");
        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);//blockUI を呼び出す

        var コンテナー = $('.blockUI.blockMsg');
        var 目的 = opts.message;
        if(opts.auto_center){
          center_of_dom(コンテナ, 狙い);//中央揃え
          //サイズ変更時に中央揃え
          $(window).resize(関数() {
            center_of_dom(コンテナ、目的);
          });
        }else if(opts.auto_center_x){
          center_of_x(コンテナ, 狙い);//中央揃え
          //サイズ変更時に中央揃え
          $(window).resize(関数() {
            center_of_x(コンテナ、目的);
          });
        }else if(opts.auto_center_y){
          center_of_y(コンテナ, 狙い);//中央揃え
          //サイズ変更時に中央揃え
          $(window).resize(関数() {
            center_of_y(コンテナ、目的);
          });
        }

      };
      cp_props($._blockUI, $.blockUI, true);//cp プロパティ

      //その他のメソッド
      $.blockUI.center_of_dom = center_of_dom;

    })();