토글 레이어 외부영역 닫기

토글 레이어 외부영역 닫기

QA

토글 레이어 외부영역 닫기

본문

많은 조언으로 구글링해서 적용후 정상작동까지 확인했구요

부가적으로 이것저것 함수를 넣었더니 

 

button1만 클릭해야 #div1과 #layer_backgroud 두아이디가 display : block 과 none이 되고있어요

 

#div1 레이어 영역을 제외한 밖의 #layer_backgroud 아이디를 클릭해도 block과 none이 되게 하고싶어서요 혹시 어디부분을 수정해야할까요?

 

해당부분 구글링으로 찾아보니 mouseup를 말씀해주셔서 적용해보니 정상적으로 적용은되지만

button1부분에 addClass부분은 적용이 안되네요

 

<input class="button1">

 

<div id="div1">

 내용

</div>

 

<div id="layer_background"></div>

 

#layer_background의 스타일은 밑에 스타일로 적용했어요~!

 


#layer_background {  
    display:none;
    position:fixed;  
    left: 0;
    top: 0;
    z-index: 1001;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    }

 

 

$(document).ready(function(){
   $('#div1').hide();
   $('.button1').toggle (
    function(){
     $('#div1').show();
     $('#layer_backgroud').show();
     $(".button1").addClass("active");
    },
    function(){
     $('#div1').hide();
     $('#layer_backgroud').hide();
     $(".button1").removeClass("active");
    }
   );
  });

이 질문에 댓글 쓰기 :

답변 2

#div1을 제외한 다른곳을 클릭하면 div1 과 layer_background가 하이드가 되게 하고 싶다는건가요?

이걸 추가해주면 될겁니다.

 

  $( document ).ready(function() {
    $(document).mouseup(function(e){
    var container = $("#div1");
    if (!container.is(e.target) && container.has(e.target).length === 0)
        container.hide();
        $('#layer_background').hide();
    });
});

그리고 올리신 제이쿼리에 bayer_background 에 오타가 있네요. 확인해보셔야 할것 같아요.

 

답변을 작성하시기 전에 로그인 해주세요.
전체 26
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT