Close div if click outside

by hlee0126

HTML

<div id="popup" class="popup"> 
    Content
    <div>DIV inside</div>
</div>
<button id="open">Open1</button>

CSS

.popup {
    border: 1px solid black;
    position:absolute;
    left: 50%;
    top: 50%;
    width:100px;
    height:100px;
    background-color: green;
}

JavaScript

$(document).ready(function () {
     $('#popup').hide()
 });

 $('#open').on('click', function () {
     $('#popup').show(500)
 });

 $(document).mouseup(function (e) {
     var popup = $("#popup");
     if (!$('#open').is(e.target) && !popup.is(e.target) && popup.has(e.target).length == 0) {
         popup.hide(500);
     }
 });