CMS솔루션마켓, 이온디 - 워드프레스, 라이믹스, 카페24, 그누보드, 엑셀

프리랜서 커뮤니티

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 

 
댓글은 로그인 사용자만 작성 가능합니다. 로그인하기