[jQuery] 타켓영역을 제외하고 클릭했을 시 숨김처리(레이어 팝업 숨김처리)

우리가 흔히 마크업을 하게 되면

layerPopUp을 만들게 됩니다. 레이어 팝업을 만들 경우 레이어팝업 안에 닫기 버튼이 존재하게 되는데요.

PC 같은경우 닫기 버튼이 존재하게 되면 그리 큰 이상은 없습니다.

만약 닫기 버튼이 없는 레이어 메뉴라고 가정합시다. 그리고 모바일 입니다.

닫기 버튼이 없는 레이어 메뉴는 어떻게 숨김처리 해야할까요?? 이럴때 메뉴영역을 제외한 영역을 클릭했을 시 

숨김처리되는 스크립트 소스가 필요한 것입니다.

검색을 통하여 여러가지 소스를 확인해 보았는데요. 정작 저에게 필요하고 깔금한 소스를 찾지 못했습니다.

그래서 제가 정리한 소스를 정리하려 합니다.

많은 분들이 참고하고 더 좋게 custom 하셧음 좋겠네요

소스는 아래와 같습니다.

HTML

<div class="target-box-a">
    target-box-a
    <div class="target-box-b">
        target-box-b
        <div class="target-box-c">
            target-box-c
 
            <button type="button" class="button JS-popup-btn">팝업호출</button>
 
            <div class="popup-box">나 팝업</div>
 
        </div>
    </div>
</div>

CSS

.target-box-a { position: relative; padding: 50px; background: red; color: blue; }
.target-box-a .target-box-b { padding: 50px; background: yellow; }
.target-box-a .target-box-b .target-box-c { padding: 50px; background: green; }
.target-box-a .target-box-b .target-box-c .popup-box { display: none; position: absolute; top: 30%; left: 50%; width: 100px; height: 100px; text-align: center; line-height: 100px; color: #000; background: #65feff; border: 1px solid #1fd5d6; -webkit-box-shadow: 2px 2px 14px #000; -moz-box-shadow: 2px 2px 14px #000; box-shadow: 2px 2px 14px #000; }
.target-box-a .target-box-b .target-box-c .popup-box.view { display: block; }

SCSS

.target-box-a{
    position:relative;
    padding:50px;
    background:red;
    color:blue;
    .target-box-b{
        padding:50px;
        background:yellow;
        .target-box-c{
            padding:50px;
            background:green;
            .bottom{

            }
            .popup-box{
                display:none;
                position:absolute;
                top:30%;
                left:50%;
                width:100px;
                height:100px;
                text-align:center;
                line-height:100px;
                color:#000;
                background:#65feff;
                border:1px solid #1fd5d6;
                -webkit-box-shadow:2px 2px 14px #000;
                -moz-box-shadow:2px 2px 14px #000;
                box-shadow:2px 2px 14px #000;
                &.view{
                    display:block;
                }
            }
        }
    }
}

일단 위와같이 적용하면 화면은 이렇습니다.

"나 팝업"은 안나올 것 이지만 미리 있다는것을 보여드립니다.

간단히 설명 드리면 팝업호출이라는 버튼을 누르면 "나 팝업"이라는 layer를 보여줄 것입니다. 

그리고 팝업호출 버튼은 계속 toggle 될것이고 "나 팝업"안에서 클릭시 아무런 반응이 없고 바탕부분을 클릭하면 "나 팝업"이 사라지는 스크립트를 짤것 입니다. 그럼 script는 아래와 같습니다.

JavaScript

// toggle 팝업설정.
$('.JS-popup-btn').on('click', function(){
    $('.popup-box').toggleClass('view');
});
 
// 타겟영역을 제외하고 클릭했을 시 팝업 숨김처리.
$('body').on('click', function(e){
    var $tgPoint = $(e.target);
    var $popCallBtn = $tgPoint.hasClass('JS-popup-btn')
    var $popArea = $tgPoint.hasClass('popup-box')
 
    if ( !$popCallBtn && !$popArea ) {
        $('.popup-box').removeClass('view');
    }
});

비교적 나름 깔끔한 소스라 생각이 드네요. 그럼 많은 의견 남겨주시고 공감 버튼 눌러주시면 감사하겠습니다. :)