[태그:] modal

HTML

<a href="javascript:;" class="share"><i class="fa fa-share-alt" aria-hidden="true"></i> 공유하기 클릭</a>
<div class="share-pop">
     <div class="inner">팝업내용</div>
</div>

CSS

.share-pop {
     display: none;
     width: 200px;
     height: 200px;
     background: tomato;
}
.share-pop .inner {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100%;
     color: #fff;
}

JS

$(".share").click(function () {
     $(".share-pop").stop().fadeToggle(500);
     return false; //중요
});
//공유하기 팝업 외에 영역 클릭
$(document).click(function (e) {
     //문서 body를 클릭했을때
     if (e.target.className == "share-pop") {
          return false;
     } //내가 클릭한 요소(target)를 기준으로 상위요소에 .share-pop이 없으면 (갯수가 0이라면)
     $(".share-pop").stop().fadeOut(500);
});

See the Pen 다른영역 클릭시 팝업 닫기 by Juyeon (@Juyeon) on CodePen.