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

</p>

<p><style></p>

<p>.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;

}</p>

<p>.layer-popup.show {

    display: block;

}</p>

<p>.modal-dialog {

    width: 300px;

    margin: 40px auto;

    background-color: #fff;

}</p>

<p>.modal-content {

    padding:10px 15px;

    text-align: center;

    line-height: 100px;

}</p>

<p></style></p>

<p><script></p>

<p>// 팝업 열기

$(document).on("click", ".btn-open", function (e){

    var target = $(this).attr("href");

    $(target).addClass("show");

});</p>

<p>// 외부영역 클릭 시 팝업 닫기

$(document).mouseup(function (e){

    var LayerPopup = $(".layer-popup");

    if(LayerPopup.has(e.target).length === 0){

        LayerPopup.removeClass("show");

    }

});</p>

<p></script></p>

<p> </p>

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

<p><div class="container">

    <div class="layer-popup show" id="layer-popup">

        <div class="modal-dialog">

            <div class="modal-content">

                팝업 내용입니다.

            </div>

        </div>

    </div>

</div></p>

<p> </p>

<p>