[jQuery] 외부영역 클릭시 div 숨기기

안녕하세요. 오늘은 외부 영역 클릭시 div를 숨기는 스크립트를 알아보겠습니다.

보통은 레이어팝업을 구현할 때 많이 사용하는데요. 팝업 외의 영역을 클릭했을 때 사라지도록 많이 사용됩니다.

 

[html]

<div style="width: 200px;height: 200px;background: azure">
	외부영역 클릭시 이벤트
</div>

 

<js>

$(document).mouseup(function (e) {
		var movewrap = $("div");
		if (movewrap.has(e.target).length === 0) {
			movewrap.hide();
		}
	});

movewrap이라는 변수를 지정해주고, length가 0일때, div를 뜻하는 movewrap을 hide시키는 스크립트입니다.