ITコラム

jQuery

2018.07.13

jQuery【 jQuery UI 】dialog position ダイアログの位置を指定

jQuery UI を利用して、メッセージ等を表示するダイアログの位置を指定することができます。
今回は、jQuery UI でダイアログの位置を指定するサンプルを紹介します。

ダイアログの作成方法については jQuery【 jQuery UI 】dialog で様々なダイアログを作成するサンプルもご参照下さい。

1. ダイアログの位置指定方法

　
ダイアログの位置を指定する場合は、dialog の position オプションを使用します。
position オプションは、次のような 3 つの引数（ my、at、of ）を持つ Object 型で指定します。

my
要素自身の基準点を要素内のどの位置にするのかを、” 水平位置　垂直位置 ” の順で指定水平位置の指定値 left center right 垂直位置の指定値 top center bottom “left top”のように指定 “right”指定は “right center”、”top”指定は”center top”として扱われる “right+10 top-25%”のような相対的な位置指定も可能（単位は px か % ）初期値：”center”
at
「 of 」で指定された HTML 要素のどの位置に配置するのかを、” 水平位置　垂直位置 ” の順で指定指定値については「 my 」と同じ初期値：”center”
of
“#top-info”のように配置対照となる HTML 要素を指定 selector、element、jQuery、event で指定（event で指定した場合は、pageX、pageYプロパティを使用）初期値：null

　　
ダイアログの位置を指定する position オプションは、次のように記述します。

$("#wk_dialog").dialog({
  position: {my: "left top", at: "left bottom", of: "#wk_div"}
});

▲目次へ戻る

2. position を使用してダイアログの位置を指定

　　
jQuery UI を使用して、ダイアログの位置を指定します。
各ボタンをクリックして、デフォルトの表示位置と比較してみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script type="text/javascript">
<!--
$(function() {
  $("#d_btn").click(function() {
    $("#d_dl").dialog({
      modal:true,
      title:"default"
    });
  });

  $("#lt_btn").click(function() {
    $("#lt_dl").dialog({
      modal:true,
      title:"left top",
      position: {my: "left top", at: "left top", of: window}
    });
  });

  $("#rb_btn").click(function() {
    $("#rb_dl").dialog({
      modal:true,
      title:"right bottom",
      position: {my: "right bottom", at: "right bottom", of: window}
    });
  });
});
//-->
</script>

<div id="d_dl">
  <p>デフォルト位置のダイアログです！</p>
</div>
<div id="lt_dl">
  <p>左上指定のダイアログです！</p>
</div>
<div id="rb_dl">
  <p>右下指定のダイアログです！</p>
</div>

<div style="background-color:#CCC; padding : 20px;">
  <input type="button" id="d_btn" value="デフォルト">
　
  <input type="button" id="lt_btn" value="左上指定">
　
  <input type="button" id="rb_btn" value="右下指定">
</div>

jQuery UI の導入についてはjQuery【 jQuery UI 】UI の導入と使用方法をご参照下さい。

▲目次へ戻る

3. dialog のオプション

　
dialog には、position の他にも次のようなオプションがあります。

autoOpen
ロード時に自動的にダイアログを表示するかどうかを指定（falseを指定すると open()メソッド呼び出し時にダイアログを表示）初期値：true
appendTo
ダイアログを挿入する要素を指定初期値：”body”
buttons
ダイアログに表示されるボタンを指定複数のボタンを指定可能ボタンが押下時の処理をコールバック関数として設定可能初期値：{　}
closeOnEscape
ダイアログフォーカス時にEscキーの押下でダイアログを閉じるか否かを指定初期値：true
closeText
閉じるボタンに表示されるテキストを指定（デフォルトのテーマでは、閉じるボタン非表示）初期値：”close”
dialogClass
ダイアログに指定した任意の class 名を追加初期値：””
disabled
ダイアログを無効にするかどうかを指定初期値：false
draggable
タイトルバーをドラッグしてダイアログを移動可能とするかどうかを指定（実際に移動可能にするためには Draggableウィジットを読み込む）初期値：true
height
ダイアログの高さを数値（単位は px ）又は”auto”で指定初期値：”auto”
hide
hideアニメーションの指定 Number：指定した時間(ミリ秒)でフェードアウトアニメーションを行う String：hideアニメーションをjQuery UIのエフェクト名で指定 Object：effect, duration, easingのプロパティで指定（effectはhideアニメーションをjQuery UIのエフェクト名の文字列で指定し、durationとeasingは省略可）初期値：null
maxHeight
ダイアログをリサイズ出来る高さの最大値(px)を指定初期値：false
maxWidth
ダイアログをリサイズ出来る幅の最大値(px)を指定初期値：false
minHeight
ダイアログをリサイズ出来る高さの最小値(px)を指定初期値：150
minWidth
ダイアログをリサイズ出来る幅の最小値(px)を指定初期値：150
modal
他の要素が無効化されるモーダルダイアログとするかどうかを指定初期値：false
position
1. ダイアログの位置指定方法を参照初期値：{my: “center”, at: “center”, of: window}
resizable
ダイアログのリサイズを可能とするかどうかを指定（実際のリサイズ処理は、jQuery UI Resizable ウィジットが読み込む）初期値：true
show
showアニメーションの指定 Number：指定した時間(ミリ秒)でフェードインアニメーションを行う String：showアニメーションをjQuery UIのエフェクト名で指定 Object：effect, duration, easingのプロパティで指定（effectはshowアニメーションをjQuery UIのエフェクト名の文字列で指定し、durationとeasingは省略可）初期値：null
title
ダイアログのタイトルを指定初期値：null
width
ダイアログの横幅を指定（単位は px ）初期値：300