web-dev-qa-db-ja.com

jQueryダイアログの配置

JQueryダイアログをブラウザの右端からxピクセル離して配置したいと思います。これはとにかく可能ですか？

http://jqueryui.com/demos/dialog/

位置オプションにはそのような設定はないようですが、他に方法はありますか？

jquerydialogcss-position
15
miro

ダイアログボックスのposition:absoluteを作成すると、通常のページフローが考慮され、leftおよびtopプロパティを使用してページの任意の場所に配置できます。

$('.selector').dialog({ dialogClass: 'myPosition' });

myPositioncssクラスを次のように定義します。

.myPosition {
    position: absolute;
    right: 200px; /* use a length or percentage */
}

top、left、right、およびbottomproperties のmyPositionは、次のいずれかを使用して設定できます。ピクセルやパーセンテージなどの長さ。

8
Anurag

これにより、ダイアログdivが固定位置に保たれます

これはIE FF chromeとsafariで動作します

jQuery("#dialogDiv").dialog({
    autoOpen: false, 
    draggable: true,
    resizable: false,
    height: 'auto',
    width: 500,
    modal: false,
    open: function(event, ui) {
        $(event.target).parent().css('position', 'fixed');
        $(event.target).parent().css('top', '5px');
        $(event.target).parent().css('left', '10px');
    }

});

ダイアログボックスを開きたいときは、

$('#dialogDiv').dialog('open');
15
user583576

これらの回答のほとんどは私には回避策のようであり、私はそれを行うための公式のjQueryの方法を見つけたかったのです。 .position()のドキュメントを読んだ後、jQueryウィジェットの初期化で実際に実行できることがわかりました。

$("#dialog").dialog({
    title:title,
    position:{my:"right top",at:"right+100 top+100", of:"body"},
    width:width,
    height:height
})

ここで、+ 100はそれぞれ右と上からの距離です

6
user3413723

私は答えがすでに受け入れられていることを理解していますが、誰かがより多くの情報を必要とする場合に備えて： http://salman-w.blogspot.co.uk/2013/05/jquery-ui-dialog-examples.html

$(function() {
            $("#dialog").dialog({
                position: {
                    my: "right bottom",
                    at: "right bottom",
                    of: window
                }
            });
        });
5
Sanjay Zalke

このコードを使用して、uは上部と左側の位置を指定できます。

$('#select_bezeh_window').dialog({
    modal:true,
    resizable:false,
      draggable:false,
      width:40+'%',
      height:500 ,
      position:{
          using: function( pos ) {
                $( this ).css( "top", 10+'px' );
                $( this ).css( "left", 32+'%' );
          }
       }
 });
4
sasan mohammadi

ここを見てください： http://jqueryui.com/demos/dialog/#option-position

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

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

初期化後、位置オプションを取得または設定します。

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

これは、右上隅に10pxのオフセットでダイアログを表示するのに役立ちました：position: "right-10 top+10"：

$( "#my-dialog" ).dialog({
    resizable: false,
    height:"auto",
    width:350,
    autoOpen: false,
    position: "right-10 top+10"
});
2
Victor

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

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