Tags: Simple Form/Dialog which closed on clicking outside

by pleinx

HTML

<ul>
  <li>
    Modifiy Search
    <button class="modify">Test</button>
    <div class="dialog">
      <span class="close">Close me</span>
      Im a test dialog
    </div>
  </li>
</ul>

CSS

ul li button {
  display: block;
}

.dialog {
  display: none;
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
  background: blue;
}

.dialog .close {
  float: right;
  color: white;
}

JavaScript

$('.modify').on('click', function(e) {
	$(this).parent().find('.dialog').fadeIn();
});

$('.close').on('click', function(e) {
	$(this).parent().fadeOut();
});

$(document).mouseup(function (e) {
    var container = $(".dialog");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
        container.hide();
    }
});