69

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

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

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

4

21 に答える 21

70

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

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

ドキュメント: http://jqueryui.com/demos/position/
取得: http://jqueryui.com/download

于 2010-09-03T02:11:09.743 に答える
51

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

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

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

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

コード例 - (jQuery UI 2009-12-03 から取得)

position オプションを指定してダイアログを初期化します。

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

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

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

position 属性を削除すると、それ自体が中心になることがわかると思います。それ以外の場合は、「option」、「position」、および「center」の 3 つの要素を定義する 2 番目の setter オプションを試してください。

于 2009-12-03T13:14:16.030 に答える
20

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

<script src="jquery.ui.position.js"></script>
于 2012-06-28T13:14:34.087 に答える
12 
open: function () {

    var win = $(window);

    $(this).parent().css({
        position: 'absolute',
        left: (win.width() - $(this).parent().outerWidth()) / 2,
        top: (win.height() - $(this).parent().outerHeight()) / 2
    });
}
于 2015-06-03T15:28:12.400 に答える
11

したがって、誰かが私のようにこのページにアクセスした場合、または 15 分で忘れた場合、iframe(blah) で ie8 を使用して jqueryui ダイアログ バージョン 1.10.1 と jquery 1.9.1 を使用しています。うまくいかない、つまり

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

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

于 2013-03-15T05:13:28.827 に答える
5

ダイアログを配置するには、関数を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
    }
});
于 2015-11-09T14:51:26.460 に答える
4

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

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

幸運を！

于 2015-05-15T02:54:35.637 に答える
4

特にブラウザのビューポートよりも大きなドキュメントの場合、JQueryダイアログの配置で地獄をもたらす可能性のあるもう1つのこと-宣言を追加する必要があります

<!DOCTYPE html>

ドキュメントの上部。

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

于 2014-12-15T13:14:02.283 に答える
3

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

于 2012-12-20T10:57:20.527 に答える
2

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

于 2012-01-23T17:13:45.877 に答える
2

これは IE でのみ実行されていますか? その場合は、これをページの HEAD タグの FIRST 行に追加してみてください:

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

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

于 2012-11-13T21:49:40.903 に答える
2

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

$("#dialog-div-id").dialog({position: ['center', 'top'],....
于 2013-06-14T13:39:11.677 に答える
2

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

于 2013-06-14T22:25:18.247 に答える
0

CSSで修正しました：

.ui-dialog .ui-dialog-content {
  width: 975px!important;
  height: 685px!important;
  position: fixed;
  top: 5%;
  left: 50%;
  margin:0 0 0 -488px;
}
于 2014-02-14T04:18:26.167 に答える
0

IE9 でダイアログを中央に配置できませんでした。

これをcssに追加して修正しました：

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

パーセントは関係ありません。少数でも機能しました。

于 2014-05-30T22:45:14.317 に答える