jQueryでダイアログを表示する方法

Pocket

jQueryUIを使うとダイアログを取り扱うことができますが、小さなプログラムなので、jQueryUIは使わずjQueryだけでダイアログを表示させてみようと思いました。
意外と苦労したので、メモとして残しておきます。

やりたいことは次の2点でした。

クリックした位置の右にダイアログを表示。
ダイアログの範囲外をクリックするとダイアログを非表示。

この非表示のところで苦労しました。
ダイアログと言いながら中身は空っぽです。

CSS

#dialog {
  border: solid 1px silver;
  background-color: aliceblue;
  display: none;
  position: absolute;
  width: 200px;
  height: 200px;
}

HTML

<div id="base">ここをクリックして表示</div>
<div id="dialog">ダイアログ</div>

JavaScript

$("#base").click(function(event) {
  $("#dialog").show();
  $("#dialog").css({ top: event.pageY, left: event.pageX });
  event.stopPropagation();
});
$(document).click(function() {
  $("#dialog").hide();
});

サンプル

関連記事

[ 2019年2月16日 | カテゴリー: JavaScript | タグ: ]

« | »

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

送信してください。


タグ

カテゴリー

最近の投稿

最近のコメント

固定ページ

アーカイブ

stabucky

写真

メタ情報