web-dev-qa-db-ja.com

jQueryダイアログを中央に配置するにはどうすればよいですか？

私は次のコードを試しましたが、ダイアログの左上隅の位置を中央に配置するだけで、要素を右に揃えることができます。中心線がダイアログを50％50％半分にカットするように、要素の幅をカウントする実際の中心にダイアログを中央に配置するにはどうすればよいですか？

$('.selector').dialog({ position: 'center' });

http://docs.jquery.com/UI/Dialog#option-position

jqueryjquery-uidialogjquery-dialog
64
newbie

位置を設定する必要はないはずです。

$("#dialog").dialog();

デフォルトで中央に配置する必要があります 。

私はこの記事を見て、 ダイアログの配置に関するjquery-uiの公式サイト ：でその内容を確認し、その中で初期化と初期化後の2つの状態について説明しました。

コード例-（jQuery UI 2009-12-03から取得）

指定された位置オプションでダイアログを初期化します。

$('.selector').dialog({ position: 'top' });

Initの後に位置オプションを取得または設定します。

//getter
var position = $('.selector').dialog('option', 'position');
//setter
$('.selector').dialog('option', 'position', 'top');

位置属性を削除すると、それ自体が中心になりますが、「option」、「position」、「center」の3つの要素を定義する2番目のセッターオプションを試してください。

48
Luke Duddridge

最新のjQuery UIには位置コンポーネントがあります。

$("#myDialog").position({
   my: "center",
   at: "center",
   of: window
});

Doc： http://jqueryui.com/demos/position/
Get： http://jqueryui.com/download

68
WhyNotHugo

ダイアログには位置が必要なので、js位置を含める必要があります

<script src="jquery.ui.position.js"></script>
18
projo

だから誰かが私がしたようにこのページをヒットした場合、または15分で忘れた場合、iframe（blah）のie8でjqueryuiダイアログバージョン1.10.1とjquery 1.9.1を使用しており、指定内またはそれは動作しません、すなわち.

position: {
 my: "center bottom",
 at: "center top",
 of: $("#submitbutton"),
 within: $(".content")
}

私を正しい方向に向けてくれた@ vm370に感謝します。

11
Mike
open: function () {

    var win = $(window);

    $(this).parent().css({
        position: 'absolute',
        left: (win.width() - $(this).parent().outerWidth()) / 2,
        top: (win.height() - $(this).parent().outerHeight()) / 2
    });
}
10
Jean Paul A.K.A el_vete

中心位置を修正するには、次を使用します。

open : function() {
    var t = $(this).parent(), w = window;
    t.offset({
        top: (w.height() / 2) - (t.height() / 2),
        left: (w.width() / 2) - (t.width() / 2)
    });
}
7
Eduardo Cuomo

これを試して....

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

ブラウザのウィンドウの中央にjQueryダイアログを配置すると、最良の結果が得られます。

position: { my: "center bottom", at: "center center", of: window },

http://api.jqueryui.comのドキュメントで説明されているように、オプション「using」を使用して配置するより正確な方法がおそらくあります。/position / しかし、私は急いでいます...

6
derekg

ダイアログを配置するには、関数dialog()を2回呼び出す必要があります（jQuery v1.11.2/jQueryUI v1.10.4）。

$("#myDialog").dialog({
    /* initial dialog parameters */
}).dialog({
    position: {
        my: "center center",
        at: "center center",
        of: window
    }
});
5
okki

次の位置パラメータは私のために働いた

position: { my: "right bottom", at: "center center", of: window },

幸運を！

4
Rakesh Prajapati

Jquery UI 1.9.2、jquery以降のバージョンはIE8をサポートしていません

そのための2つの解決策を見つけました。

  1. IE8をサポートするためにjquery UI 1.7.2にロールバックし、

  2. Jquery UI 1.9.2でこのコードを試してください

position: {my: "center",  at: "center", of: $("body"),within: $("body") }
4
r-arun-r

特にブラウザのビューポートよりも大きいドキュメントの場合、JQuery Dialogの配置で地獄を与えるもう1つのこと-宣言を追加する必要があります

<!DOCTYPE html>

ドキュメントの上部。

これがないと、jqueryはダイアログをページの下部に配置する傾向があり、ドラッグしようとするとエラーが発生する場合があります。

3
thedrs

次の説明によると、問題は新しいjQueryバージョンのIE互換性が低いためである可能性があり、1.7.2に戻すとIE8でのみ発生する問題を解決できるようです。 http://forum.jquery.com/topic/jquery-ui-dialog-positioning-not-working-in-ie-8

3
vm370

Win7/IE9環境の場合、cssファイルで設定するだけです：

.ui-dialog {
   top: 100px;
   left: 350px !important;
}
2
Nikolay

個々のjqueryファイルまたはカスタムjqueryダウンロードを使用している場合は、jquery.ui.position.jsがページに追加されていることを確認してください。

2
Ioannis Suarez

IEのみでこれに遭遇していますか？その場合、これをページのHEADタグの最初の行に追加してみてください：

<meta http-equiv="X-UA-Compatible" content="IE=7" />

しかし、すべての互換性の問題は後のjQueryで修正されましたが、今日はこの問題に遭遇しました。

2
John

古いバージョンと位置を使用したくない人のためにこれを試してください：

$("#dialog-div-id").dialog({position: ['center', 'top'],....
2
Aneesh Vijendran

また、モバイルデバイスでjquery uiを使用する場合は、手動で再センタリングを行う必要があります-ダイアログは、「左と上」のcssプロパティを介して手動で配置されます。ユーザーが方向を切り替えた場合、位置決めは中央に配置されなくなり、後で調整/再中央配置する必要があります。

2
gekido

私はこれに問題があり、最終的にこれを見つけました。今日まで、私は本当に古いバージョンのjQueryバージョン1.8.2を使用していました。

dialogを使用したすべての場所で、次の位置オプションを使用して初期化しました。

$.dialog({
    position: "center"
});

ただし、position: "center"を削除したり、正しい構文に置き換えたりしても、うまくいかないことがわかりました。次に例を示します。

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

上記は正しいのですが、古い方法でページをロードしたときに、optionを使用して位置を中心として設定していました。

// The wrong old way of keeping a dialog centered
passwordDialogInstance.dialog("option", "position", "center");

これにより、すべてのダイアログウィンドウがビューポートの左上に固定されていました。

このすべてのインスタンスを以下の正しい新しい構文に置き換える必要がありました。

passwordDialogInstance.dialog(
    "option",
    "position", 
    { my: "center", at: "center", of: window }
);
1
Luke

私はcssで修正しました：

.ui-dialog .ui-dialog-content {
  width: 975px!important;
  height: 685px!important;
  position: fixed;
  top: 5%;
  left: 50%;
  margin:0 0 0 -488px;
}
0
Liko