ブラウザのサイズを変更するときにjQuery UIダイアログを自動的に中央揃えする方法は？

jquery UIダイアログを使用すると、1つを除いてすべてがうまく機能します。ブラウザのサイズが変更されても、ダイアログは最初の位置にとどまるので、非常に煩わしい場合があります。

あなたはそれをテストすることができます：http : //jqueryui.com/demos/dialog/

「モーダルダイアログ」の例をクリックして、ブラウザのサイズを変更します。

ブラウザのサイズが変更されたときにダイアログを自動的に中央に配置できるようにしたいと思います。これは、アプリ内のすべてのダイアログに対して効率的な方法で実行できますか？

どうもありがとう！

positionオプションを設定するとこれが強制されるため、ここで使用するすべてのダイアログをカバーする同じセレクターを使用するだけ#dialogです（それが見つからない場合は、すべてのjQueryのようにアクションは実行されません）。

1.10より前のjQuery UI

$(window).resize(function() {
    $("#dialog").dialog("option", "position", "center");
});

jQuery UI 1.10以降

$(window).resize(function() {
    $("#dialog").dialog("option", "position", {my: "center", at: "center", of: window});
});

上記のコードのみを追加した同じjQuery UIデモページは次のとおりです。ここでは、ウィンドウのresizeイベントにハンドラーを追加しているだけな.resize()ので、適切なタイミングで再中央揃えがトリガーされます。

Ellesedilの答えの代わりに、

その解決策はすぐにはうまくいかなかったので、動的でも短縮版である次のことを行いました：

$( window ).resize(function() {
    $(".ui-dialog-content:visible").each(function () {
        $( this ).dialog("option","position",$(this).dialog("option","position"));
    });
});

Ellesedilの+1

編集：

単一のダイアログに最適な非常に短いバージョン：

$(window).resize(function(){
    $(".ui-dialog-content").dialog("option","position","center");
});

触れたくない独自のダイアログがある場合は、.each（）を使用する必要はありません。

Nickの回答をより柔軟な方法で使用する、より包括的な回答は、こちらにあります。

そのスレッドからの関連性のあるコードの改作を以下に示します。この拡張機能は本質的に、trueまたはfalseを受け入れるautoRepositionと呼ばれる新しいダイアログ設定を作成します。記述されたコードでは、デフォルトでオプションがtrueに設定されています。これをプロジェクトの.jsファイルに入れて、ページで利用できるようにします。

    $.ui.dialog.prototype.options.autoReposition = true;
    $(window).resize(function () {
        $(".ui-dialog-content:visible").each(function () {
            if ($(this).dialog('option', 'autoReposition')) {
                $(this).dialog('option', 'position', $(this).dialog('option', 'position'));
            }
        });
    });

これにより、ページにダイアログを作成するときに、この新しい設定に「true」または「false」を指定できます。

$(function() {
    $('#divModalDialog').dialog({
        autoOpen: false,
        modal: true,
        draggable: false,
        resizable: false,
        width: 435,
        height: 200,
        dialogClass: "loadingDialog",
        autoReposition: true,    //This is the new autoReposition setting
        buttons: {
            "Ok": function() {
                $(this).dialog("close");
            }
        }
    });
});

現在、このダイアログは常にそれ自体を再配置します。AutoReposition（または設定と呼ぶもの）は、デフォルトの位置を持たないダイアログを処理し、ウィンドウのサイズが変更されたときに自動的に再配置できます。ダイアログを作成するときにこれを設定しているため、再配置機能がダイアログ自体に組み込まれるようになるため、ダイアログを識別する必要はありません。そして最良の部分は、これがダイアログごとに設定されるため、いくつかのダイアログを自分自身で再配置させ、他のダイアログをそのままの位置に残すことができるということです。

完全なソリューションについては、jQueryフォーラムのユーザーscott.gonzalezに感謝します。

機能する別のCSS専用オプションはこれです。負のマージンは、高さの半分と幅の半分に等しくなければなりません。したがって、この場合、ダイアログの幅は720px、高さは400pxです。これにより、垂直方向と水平方向の中央に配置されます。

.ui-dialog {
  top:50% !important;
  margin-top:-200px !important; 
  left:50% !important;
  margin-left:-360px !important
}

あるいは、jQueryのUI 位置を使用できます。

$(window).resize(function ()
{
    $(".ui-dialog").position({
        my: "center", at: "center", of: window
    });
});

みなさん、こんにちは！

バニラJSソリューション：

(function() {
  window.addEventListener("resize", resizeThrottler, false);

  var resizeTimeout;

  function resizeThrottler() {
    if (!resizeTimeout) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        actualResizeHandler();
      }, 66);
    }
  }

  function actualResizeHandler() {
    $(".ui-dialog-content").dialog("option", "position", { my: "center", at: "center", of: window });
  }
}());