팝업 만들때 팝업을 제외한 다른곳을 누를때 닫히게하는 방법좀 알수있을까요?

<style>

.layer-popup {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100;
}

.layer-popup.show {
    display: block;
}

.modal-dialog {
    width: 300px;
    margin: 40px auto;
    background-color: #fff;
}

.modal-content {
    padding:10px 15px;
    text-align: center;
    line-height: 100px;
}

</style>

<script>

// 팝업 열기
$(document).on("click", ".btn-open", function (e){
    var target = $(this).attr("href");
    $(target).addClass("show");
});

// 외부영역 클릭 시 팝업 닫기
$(document).mouseup(function (e){
    var LayerPopup = $(".layer-popup");
    if(LayerPopup.has(e.target).length === 0){
        LayerPopup.removeClass("show");
    }
});

</script>

 

<a href="#layer-popup" class="btn-open">팝업 열기</a>

<div class="container">
    <div class="layer-popup show" id="layer-popup">
        <div class="modal-dialog">
            <div class="modal-content">
                팝업 내용입니다.
            </div>
        </div>
    </div>
</div>