ベタ書き版
デモ: http://hnakamur.github.io/jquery-examples/popup.html
ソース: https://github.com/hnakamur/jquery-examples/blob/bcf79ddb6bff9e8549e953ac7f3bceaf2b692713/popup.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>web ui examples</title>
<style>
# popup {
width: 200px;
height: 100px;
background-color: #eee;
display: none;
position: absolute;
}
</style>
</head>
<body>
<input type="button" value="show popup" id="showPopup"/>
<div id="popup">
This is a popup.
Click outside to close,
or press ESC key.
</div>
<script src="js/jquery-1.11.0.js"></script>
<script>
$(function() {
$("#showPopup").click(function(e) {
$("#popup").css($("#showPopup").offset()).show();
e.stopPropagation();
});
$("#popup").click(function(e) {
e.stopPropagation();
});
$(document).click(function(e) {
$("#popup").hide();
});
$(document).keydown(function(e) {
if (e.which === 27) { // ESC
$("#popup").hide();
}
});
});
</script>
</body>
</html>
ポップアップの外部をクリックするイベントはdocumentのクリックイベントで実現します。ただし、ボタンやポップアップ自身をクリックしたイベントがbubblingでdocumentのクリックイベントハンドラが起動されること避けるため、e.stopPropagation()でbubblingを止めます。
jQueryのプラグインにした版
デモ: http://hnakamur.github.io/jquery-examples/popup-plugin.html
ソース:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>popup examples</title>
<style>
# popup, #popup2 {
width: 200px;
height: 100px;
background-color: #eee;
display: none;
position: absolute;
}
# area2 {
position: absolute;
top: 300px;
left: 150px;
}
</style>
</head>
<body>
<input type="button" value="show popup" id="showPopup"/>
<div id="popup">
This is a popup.
Click outside to close,
or press ESC key.
</div>
<div id="area2">
<input type="button" value="show popup" id="showPopup2"/>
<div id="popup2">
This is another popup.
Click outside to close,
or press ESC key.
</div>
</div>
<script src="js/jquery-1.11.0.js"></script>
<script src="js/jquery.popup.js"></script>
<script>
$(function() {
$("#showPopup").click(function(e) {
$("#popup").popup("open", $(this).position());
e.stopPropagation();
});
$("#showPopup2").click(function(e) {
$("#popup2").popup("open", $(this).position());
e.stopPropagation();
});
});
</script>
</body>
</html>
(function($, undefined) {
$.fn.popup = function(command, options) {
var el = this, doc = $(document);
if (command === "open") {
if (options.top !== undefined || options.left !== undefined) {
var pos = {};
pos.top = options.top || 0;
pos.left = options.left || 0;
this.css(pos);
}
function popupClickHandler(e) {
e.stopPropagation();
}
function docClickHandler(e) {
el.popup("close");
}
function docKeydownHandler(e) {
if (e.which === 27) { // ESC
el.popup("close");
}
}
el.on("click", popupClickHandler);
doc.on("click", docClickHandler);
doc.on("keydown", docKeydownHandler);
el.data("popup", {
handlers: {
popupClick: popupClickHandler,
docClick: docClickHandler,
docKeydown: docKeydownHandler
}
});
el.show();
} else if (command === "close") {
el.hide();
var handlers = el.data("popup").handlers;
el.off("click", handlers.popupClick);
doc.off("click", handlers.docClick);
doc.off("keydown", handlers.docKeydown);
}
};
}(jQuery));
このサンプルではポップアップを開いた時に閉じるためのハンドラを追加して、閉じた時にはハンドラを削除するようにしてみました。