• J볃교

지정한 영역 외 클릭시 팝업 닫기

2018-11-08 297

설명

  • 카카오톡 링크

지정한 영역 .line 외 영역을 클릭시 .box 가 닫히게끔 제작되었습니다.!

소스실행 현황

소스보기( X표시가 나타나면 무시하셔도 됩니다! )

<script type="text/javascript">
	$(document).mouseup(function (e) {
		//영역외 클릭시 닫치게끔
		var popup_close = $(".line");
		if (!popup_close.is(e.target) && popup_close.has(e.target).length === 0){
			$(".box").slideUp("fast");
		}	
	});
</script>
<style>
	.line {display:inline-block; width:100%; height:200px; position:relative; background:#d42525}
	.box {display:inline-block; position:absolute; left: 50%; top:50%; transform: translateX(-50%) translateY(-50%); width:100px; height:100px; background:#404040}
</style>
<div class="line">
	<div class="box">
	</div>
</div>