JQuery, 특정 레이어 밖을 클릭할 경우 열려 있는 레이어 또는 팝업 닫기

 

레이어를 띄운 상태에서 레이어 밖을 클릭할 경우 레이어 닫는 방법!

 

'예'에서 만약 id가 "layerid"인 div의 밖을 클릭할 경우 

container.has(e.target).length는 0이 리턴 되고

container.hide();를 통해 열려 있는 레이어는 닫히게 된다.

 

 

JQuery 소스

 

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

    var container = $("#layerid") 

    

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

        container.hide(); 

    } 

});

 

 

페이지 소스

 

<div id="layerid" style="width:200px; height:100px; border:1px solid #eee;">

   레이어

</div>

 

 

화면 아무곳을 클릭해도 함수를 실행시키기 위해 mouseup()을 사용했다.

 

다른 방법으로는 마우스가 레이어를 떠날 때 닫고 싶으면

mouseup 대신 mouseout을 사용하면 된다.