첨부파일 https://eond.com/jquery/377148

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 

코멘트 0
접기/펴기 | 댓글 새로고침
 
 
Total 142 articles in 3 / 8 pages
번호 제목 제목 날짜날짜
공지 슬라이더 스크립트 4종 2016/07/03 0
공지 jQuery 추천 사이트 2015/06/08 0
102 [menu] 메뉴 cleartimeout, settimeout 2016/10/21 0
101 [기타 플러그인] masonry(벽돌 레이아웃) 2016/07/03 0
100 [슬라이더 플러그인] jquery-carousel-example/ 2015/09/26 0
99 [슬라이더 플러그인] owlcarousel ver2 2015/09/14 0
98 [기초활용] jQuery를 이용한 select 태그 화살표 수정 2016/06/26 0
97 [고급활용] 사이드바 영역 외부 클릭시 사이드바 닫히기(2) 파일 2016/06/19 0
현재글 [고급활용] 사이드바 외부 영역 클릭시 사이드바 닫기 2016/06/18 0
95 [고급활용] jQuery에서의 Deferred와 Promise 2016/06/10 0
94 [추천사이트] 엄초딩님의 blog 2016/06/10 0
93 [고급활용] [jquery] 탭, 자동롤링 탭 - jquery 시간 따라 자동으로 클래스 부여하는 방법 2016/05/05 0
92 [플러그인] 앱스타일 메뉴 New in 5.6 2016/03/09 0
91 [슬라이더 플러그인] jquery blueberry 2015/11/16 0
90 [팁] jQuery Filtering sort 2015/10/29 0
89 [메소드] jQuery Events - blur, change, click, dbclick, error, focus, keydown, keypress, keyup, load, mousedown, mousemove, mouseout, mouseover, mouseup, resize, scroll, select, submit, unload 2015/10/22 0
88 [팁] jquery touchEvent 객체를 이용한 모바일웹 구현 2015/09/22 0
87 [기타 플러그인] jQuery 추천 사이트 thedesignblitz.com/best-jquery-plugins-week 2015/09/15 0
86 [기타 플러그인] [jQuery] 50+ Best jQuery Plugins of August 2013 2015/09/15 0
85 [탭] 제이쿼리 이미지 슬라이드, 탭에대해서...jquery table, tab 2015/09/15 0
84 [ticker] 스크롤 태그 움직이는 공지사항 jQuery Scrollbox scrolling 2015/09/15 0
83 [플러그인] jQuery 플러그인 소개 사이트, htmldrive.net 파일 2015/09/15 0

해시태그 디렉터리