ポップアップの外部をクリックして閉じるサンプル

## ベタ書き版

デモ: http://hnakamur.github.io/jquery-examples/popup.html

ソース: https://github.com/hnakamur/jquery-examples/blob/bcf79ddb6bff9e8549e953ac7f3bceaf2b692713/popup.html

```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

ソース:

https://github.com/hnakamur/jquery-examples/blob/2c09d6be739a33fcde4094b37472da66981f2e1e/popup-plugin.html

```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>
```

https://github.com/hnakamur/jquery-examples/blob/2c09d6be739a33fcde4094b37472da66981f2e1e/js/jquery.popup.js

```js
(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));
```

このサンプルではポップアップを開いた時に閉じるためのハンドラを追加して、閉じた時にはハンドラを削除するようにしてみました。