1. ホーム
  2. jquery

[解決済み] ブラウザのサイズを変更したときにjQuery UIダイアログを自動で中央に配置するには?

2022-12-29 08:52:55

質問

jquery UI dialogを使用しているとき、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() で、適切なタイミングで再中心をトリガーします。