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

https://stackoverflow.com/questions/1839702

12-09-2019
|

質問

次のコードを試してみましたが、ダイアログの左上隅の位置が中央に配置されるだけで、要素が右に揃えられます。要素の幅をカウントする実際の中心にダイアログをセンタリングして、その中心線がダイアログを50% 50%の半分にカットするにはどうすればよいですか?

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

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

解決

位置を設定する必要はないはずだと確信しています。

$("#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 番目のセッターオプションを試してください。

他のヒント

最新のjQueryのUIは、位置成分を持っています：

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

ドク： http://jqueryui.com/demos/position/ の
取得： http://jqueryui.com/downloadする

ダイアログが位置を必要とするので、あなたはJSの位置を含める必要があり、

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

誰もが私がやった、または私は15分で忘れたときのために、私はIFRAME（何とか）でIE8との対話バージョン1.10.1とjQuery 1.9.1をjqueryui使ってるようこのページにヒットし、それが必要とするのであれば指定された、またはそれが動作しない、すなわち

内

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

正しい方向に私を指しているため、@のvm370に感謝します。

open: function () {

    var win = $(window);

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

の中心位置を固定するために、私が使用します：

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

タグ....これを試してみてください

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

私はと、ブラウザのウィンドウの中央にjQueryのダイアログを置くために最良の結果を取得しています：

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

「の使用の」<のhref =「http://api.jqueryui.com/position/」のrelのマニュアルに記載されている=」オプションを指定して、それを配置するおそらくより正確な方法がありますnoreferrer "> http://api.jqueryui.com/position/ のが、私は急いでよ...

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

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

続き位置パラメータは、私のために働いた。

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

グッドラック！

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

それに対する解決策を 2 つ見つけました。

ロールバック先 jquery UI 1.7.2 IE8をサポートするには、
このコードを試してみてください Jquery UI 1.9.2

position: {my: "center",  at: "center", of: $("body"),within: $("body") }

次の議論によると、問題は新しいjQueryのバージョンでは以下IEとの互換性に起因することができ、バック1.7.2に戻すことだけIE8で発生する問題を、解決しているようです。 http://forum.jquery.com /トピック/ jqueryの-UI-ダイアログ位置決め-ないワーキング・イン・IE-8 の

特にブラウザビューポートより大きい文書に、jQueryのダイアログの位置であなたに地獄を与えることができますもう一つ - あなたが宣言を追加する必要があります。

<!DOCTYPE html>

ドキュメントの上部にます。

これがないと、jqueryのは、ページの下部にダイアログを置くために、それをドラッグしようとするとエラーが発生することがありがちます。

あなたは、個々のjqueryのファイルまたはカスタムのjQueryのダウンロードを使用している場合は、

のいずれかの方法であなたもjquery.ui.position.jsがあなたのページに追加したことを確認してください。

あなただけのIEでこのに実行していますか？もしそうなら、あなたのページのHEADタグの最初の行にこれを追加してみてください。

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

私は、すべての互換性の問題が後jQueriesに固定してもいたが、私はこの1つ、今日に走っています。

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

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

また、モバイルデバイス上のjqueryのUIを使用している場合、手動再センタリングを行う必要があります - ダイアログが手動で「左＆トップ」CSSプロパティを経由して配置されています。ユーザが方向を切り替える場合、位置決めはもはや中心されず、その後の再センタリング/適合させなければならない。

は、Win7の/ IE9環境のために、ちょうどあなたのCSSファイルに設定されます：

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

私はこれで問題があったと私は最終的にこれを考え出しました。今日まで、私は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 }
);

私はCSSで固定します：

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

IE9は、ダイアログを中央に取得できませんでした。

CSSにこれを追加することで、それを修正：

.ui-dialog {
    left:1%;
    right:1%;
}

パーセントは重要ではありません。どんな小さな数が働いています。

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow