jQuery 팝업 바깥영역 마우스클릭시 팝업 닫기 예제

jQuery 팝업 바깥영역 마우스클릭시 팝업 닫기 예제

티스토리랑 아래코드랑 뭐가 안맞는지 현재 보이는 페이지에서는 구현이 안되서 아래 코드로 대체하였다.

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<script>

$(document).ready(function(){

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

$('#popupLayer').each(function() {

if( $(this).css('display') == 'block' ) {

var objPos = $(this).offset();

objPos.right = (objPos.left + $(this).width());

objPos.bottom = (objPos.top + $(this).height());

if( e.pageX < objPos.left || e.pageX > objPos.right

|| e.pageY < objPos.top || e.pageY > objPos.bottom ) {

$(this).hide('fast');

}

}

});

});

});

</script>

<div id="popupLayer" style="width:300px;height:200px;border:1px solid #000000;display:table;">

<div id="popupILayer" style="width:100%;height:100%;display:table-cell;text-align:center;vertical-align:middle;">

이 영역 밖에 클릭시 팝업이 닫힙니다.

</div>

</div>