[jQuery, javaScript] 팝업창 제외 배경 선택 시 팝업 닫기

팝업창 영역을 제외하고 선택 시 팝업창이 닫히는 코드입니다.

<div class="popup">
   <p>
       팝업입니다 팝업입니다.팝업입니다 팝업입니다.
       팝업입니다 팝업입니다.팝업입니다 팝업입니다
     .팝업입니다 팝업입니다.팝업입니다 팝업입니다.팝업입
      니다 팝업입니다.팝업입니다 팝업입니다.
     </p> 
 </div>
 <div class="blackBg"> </div>

 

 .popup {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%, -50%);
    border: 1px solid green;
    border-radius: 8px;
    text-align: center;
    z-index: 99;
    background: #fff;
  }

  .blackBg{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background:#000;
    opacity: 0.6;
  }

$('.blackBg').on('click', function(e){

    if(e.target == e.currentTarget){
        $('.popup').addClass('hide');
        $('.blackBg').addClass('hide');
    }

});

 

See the Pen Untitled by 현정 (@Celine__509) on CodePen.

<참고>

e.target : 사용자가 실제로 클릭한 요소

e.currentTarget =$(this) : 이벤트 리스너가 달린 곳

e.preventDefault : 기본동작 막을 때