位置決めjQueryダイアログ

Question

したい位置でマjQueryダイアログx-ピクセルの右ボーダーのジーンズのブランド、、、。することにかくできますか？

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

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

Answer 1

あなたは、ダイアログボックスのposition:absoluteを作る場合は、その通常のページフローの約取り、そしてあなたは、ページ上の任意の場所に配置するleftとtopプロパティを使用することができます。

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

としてmyPositionのCSSクラスを定義します：

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

あなたはtop、left、right、およびbottom 性質がmyPositionためを設定することができますそのようなピクセルまたはパーセンテージのような長さのいずれかを使用します。

Answer 2

これは固定位置にダイアログのdivを保つ

これはIE FFクロムとサファリで私の作品

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');

Answer 3

これらの答えのほとんどは、私には回避策ように見えた、と私はそれを行うには、公式jQueryの道を探していました。 .position()のドキュメントを通して読んだ後、私はそれが実際のjQueryウィジェットの初期化で行うことができることを発見します：

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

100は、それぞれ右及び上からの距離である

Answer 4

私は答えがすでに受け入れられているが、念のいずれかが、より多くの情報が必要な場合は理解して： http://salman-w.blogspot.co .ukの/ 2013/05 / jqueryの-UI-ダイアログexamples.htmlする

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

Answer 5

このコードで、あなたの上部と左の位置を指定することができます：

$('#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+'%' );
          }
       }
 });

Answer 6

はこちらを参照してください: http://jqueryui.com/demos/dialog/#option-position

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

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

取得-設定のオプション、init.

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

Answer 7

このオフセット10pxのと右上隅にダイアログを表示するために私のために働いた：position: "right-10 top+10"ます：

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

Answer 8

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

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