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과 같이 브라우저 전체를 덮는 레이어 생성이 불가능하여
아래 코드로 해결할 수 밖에 없었다.
### 특정 영역을 제외, 나머지 클릭시 반응 이벤트
<script type="text/javascript">
<!--
$("body").click(function(e) {
if($("#autoKeyword").css("display") == "block") {
if(!$('#autoKeyword, #input_search').has(e.target).length) {
$("#autoKeyword").hide();
}
}
});
//-->
</script>
<body>
<div>
<input type="text" name="search" id="input_search" value="" />
<button>검색</button>
</div>
<div id="autoKeyword">
<div class="layer">.....</div>
</div>
</body>
출처 : http://m.blog.naver.com/kanasii79/140196680217
레이어 팝업 띄우고 이외의 영역 클릭시 팝업 닫기
레이어 창이 떴다가 다른곳에 마우스를 클릭하면 자동으로 닫히는 기능입니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 팝업 테스트</title>
<!-- jQuery 라이브러리를 다운받는다 -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
/* 마우스 다운 이벤트 시에
* 사이트에서 뛰워놓은 팝업을 닫는다.
*/
$(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");
}
</script>
</head>
<body>
<a href="javascript:show_popup();">팝업창 열기</a>
<div class="_popup" style="width:100px;height:50px; border:2px solid #777;display:none;">
저는 팝업창 입니다.
</div>
</body>
</html>
출처 : http://han300.blogspot.kr/2012/11/blog-post.html?m=1