web-dev-qa-db-ja.com

jqueryUIダイアログを配置します

Jquery UIダイアログを具体的に配置して、center、topなどで定義されていない位置に移動するにはどうすればよいですか。

おかげで、私は可能な限り具体的にしようとしました。

jqueryjquery-uijquery-ui-dialog
12
H Bellamy

positionオプションの使用： http://jqueryui.com/position/

ダイアログを表示する場所を指定します。可能な値：

1）ビューポート内の位置を表す単一の文字列：「中央」、「左」、「右」、「上」、「下」。
2）ビューポートの左上隅からピクセルオフセットされたx、y座標ペアを含む配列（例：[350,100]）
3）x、y位置文字列値を含む配列（例：右上隅の['right'、 'top']）。

例：$( ".selector" ).dialog( "option", "position", [350,100] );

25
Guillaume Cisco

これはあなたの質問に対する正確な答えではありませんが、次のように「top」とピクセル値を混在させることができます。

$('#widget').dialog({
  position: ['top', 100]
});

これにより、ダイアログがX軸に沿って中央に配置され、上から100ピクセル下に配置されます。

17
camainc

絶対配置を使用する場合は、ダイアログのpositionオプションが必要です。他の要素を基準にして配置する必要がある場合は、jqueryUIの$('selector').position(options);（以下で参照： http://jqueryui.com/demos/position/ ）を使用する別の簡単な手法があります。

例えば：

// div to position against
var $div = $('#someDiv');

// Open dialog (positioning won't work on hidden elements)
$dialog.dialog('open');

// position newly opened dialog (using its parent container) below $div.
$dialog.dialog('widget').position({
  my: "left top",
  at: "left bottom",
  of: $div
});
7
Michael R