jQueryUIを使うとダイアログを取り扱うことができますが、小さなプログラムなので、jQueryUIは使わずjQueryだけでダイアログを表示させてみようと思いました。
意外と苦労したので、メモとして残しておきます。
やりたいことは次の2点でした。
クリックした位置の右にダイアログを表示。
ダイアログの範囲外をクリックするとダイアログを非表示。
この非表示のところで苦労しました。
ダイアログと言いながら中身は空っぽです。
CSS
#dialog {
border: solid 1px silver;
background-color: aliceblue;
display: none;
position: absolute;
width: 200px;
height: 200px;
}
border: solid 1px silver;
background-color: aliceblue;
display: none;
position: absolute;
width: 200px;
height: 200px;
}
HTML
<div id="base">ここをクリックして表示</div>
<div id="dialog">ダイアログ</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();
});
$("#dialog").show();
$("#dialog").css({ top: event.pageY, left: event.pageX });
event.stopPropagation();
});
$(document).click(function() {
$("#dialog").hide();
});
コメント