jQuery - 레이어 바깥 클릭할 때 레이어 사라지게 하는 방법

많이 보던 기능이지만 정작 구현할라니까 막막했던 그것. 역시 구글느님.

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

var container = $("해당레이어 아이디");

if( container.has(e.target).length === 0)

container.hide();

});

출처 : http://poponyang.tistory.com/m/post/entry/jQuery-%EB%A0%88%EC%9D%B4%EC%96%B4-%EB%B0%94%EA%B9%A5-%ED%81%B4%EB%A6%AD%ED%95%A0-%EB%95%8C-%EB%A0%88%EC%9D%B4%EC%96%B4-%EC%82%AC%EB%9D%BC%EC%A7%80%EA%B2%8C-%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

특정영역을 제외한 영역 클릭시 JQuery has를 이용한

사이트 상단의 검색어 input[type=text]를 클릭시

자동완성 기능과 유사한 레이어가 display:block 이 되고

input과 보여진 레이어를 제외한 나머지 body부분을 클릭했을때

레이어를 display:none 하려 한다.

사이트 dtd선언이 애매한 상황이라 jquery modal과 같이 브라우저 전체를 덮는 레이어 생성이 불가능하여

아래 코드로 해결할 수 밖에 없었다.

### 특정 영역을 제외, 나머지 클릭시 반응 이벤트

출처 : http://m.blog.naver.com/kanasii79/140196680217

레이어 팝업 띄우고 이외의 영역 클릭시 팝업 닫기

레이어 창이 떴다가 다른곳에 마우스를 클릭하면 자동으로 닫히는 기능입니다.

팝업 테스트









/* 마우스 다운 이벤트 시에

* 사이트에서 뛰워놓은 팝업을 닫는다.

*/

$(document).ready(function(){

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

$('._popup').each(function(){

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

{

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

l_position.right = parseInt(l_position.left) + ($(this).width());

l_position.bottom = parseInt(l_position.top) + parseInt($(this).height());



if( ( l_position.left <= e.pageX && e.pageX <= l_position.right )

&& ( l_position.top <= e.pageY && e.pageY <= l_position.bottom ) )

{

//alert( 'popup in click' );

}

else

{

//alert( 'popup out click' );

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

}

}

});

});

})



/*

* 레이어 팝업창 보이기

*/

function show_popup()

{

$('._popup').show("fast");

}







팝업창 열기

출처 : http://han300.blogspot.kr/2012/11/blog-post.html?m=1