web-dev-qa-db-ja.com

ブラウザのサイズを変更するときにjQuery UIダイアログを自動センタリングする方法は？

Jquery UIダイアログを使用すると、1つを除いてすべてが正常に機能します。ブラウザのサイズが変更されると、ダイアログは最初の位置にとどまるため、非常に迷惑になります。

次でテストできます： http://jqueryui.com/demos/dialog/

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

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

どうもありがとう！

jqueryjquery-uimodal-dialog
98
Jorre

position option を設定するとこれが強制されるので、ここで#dialogを使用するすべてのダイアログをカバーする同じセレクターを使用します（そうでない場合すべてのjQueryのように、アクションが実行されないことを確認してください）：

jQuery UI 1.10より前

$(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() 。したがって、適切なタイミングでリセンターがトリガーされます。

156
Nick Craver

エルセディルの答えの代わりに、

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

$( 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（）を使用する必要はありません。

19
Pierre

ニックの答えをより柔軟な方法で使用するより包括的な答えは、 here にあります。

そのスレッドからの関連コードの適応は以下の通りです。この拡張機能は、基本的に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に感謝します。

13
Ellesedil

動作する別のCSSのみのオプションはこれです。負のマージンは、高さの半分と幅の半分に等しくする必要があります。したがって、この場合、ダイアログは幅720ピクセル、高さ400ピクセルです。これにより、垂直方向と水平方向の中央に配置されます。

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

または、jQuery ui position を使用できます。

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

みなさんこんにちは！

Vanilla 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 });
  }
}());
0
Alexandr Kazakov