web-dev-qa-db-ja.com

jqueryuiダイアログの配置

私はJQuery UIを使用しており、ダイアログを水平方向の中央に配置しますが、垂直方向の中心より上に、おそらく一定量のピクセルまたはページの上部からの相対的な距離だけ配置します。これを行う簡単な方法はありますか？いくつかの定義済みの値があるように見えますか、正確な位置を使用できますが、これを達成する簡単な方法はありますか？

 $("#dialog-form").dialog({
                autoOpen: false,
                width: 630,
                position: 'center',
                modal: true,
                resizable: false,
                closeOnEscape: false

            });
jqueryhtmlcssjquery-uijquery-ui-dialog
23
Joe Cartano

positionオプション を使用して、ダイアログの上部をウィンドウの上部に揃えます（ピクセルまたはパーセントオフセットを加えます）。

これにより、ダイアログが水平方向に中央に配置され、上から150ピクセルの位置に配置されます。

$("#dialog-form").dialog({
    autoOpen: false,
    width: 630,
    position: { my: 'top', at: 'top+150' },
    modal: true,
    resizable: false,
    closeOnEscape: false
});

JQuery UIの古いバージョンでは、ビューポートの左上隅からのピクセルオフセットで[x、y]座標ペアを含む配列を使用していました（例：[350,100]）。

var dialogWidth = 630;
$("#dialog-form").dialog({
    // ...
    width: dialogWidth,
    position: [($(window).width() / 2) - (dialogWidth / 2), 150],
    // ...
});
75
Alpha Codemonkey

これは私のために働いた

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

また、ここでダイアログの位置を確認できます
位置を見つける

2
Dragon

私はすでに私の答えを持っていた同じ質問を探しているときにこれに遭遇しました：

position: ['center', 'top+100']

これは水平方向に中央に配置され、上から100ピクセル

これも動作します

position: ['center', 'center+100']

水平方向に中央に、中央下から100ピクセル

1
Exlord

Exlordの答えを調整しました。

位置：['center-7％'、 'center-12％']

これは水平および垂直に調整します

$(".popup").dialog({    
position: ['center-7%', 'center-12%'],
title: 'Updating',
    width: "auto",
}
});
0
Mikeys4u

これを試して：

    position: {
        my: 'top',
        at: 'top',
        of: $('#some-div')
    },
0
Ahmed

リンクのclassクリックイベントハンドラーがあるためにjQueryダイアログを開くリンクを作成している場合、mayページの上部にジャンプする可能性があることに注意してください。ページのさらに下にモーダルダイアログを作成し、スクロールする必要があります。

誰かがjQueryダイアログがトップにジャンプするのを止めようとしていて、クリックしたリンクの近くに残したい場合は、hrefを削除してください。これを解決しようとしてほぼ発狂しました。 HTML5仕様は、明らかにhref=""またはhref="#"は、最上部に移動することを意味します。

0
DMadden51
position: { 
   my: 'top', 
   at: 'top+150' 
}

私のために働いた。

0
Santosh Bt