토글 레이어 외부영역 닫기 채택완료
많은 조언으로 구글링해서 적용후 정상작동까지 확인했구요
부가적으로 이것저것 함수를 넣었더니
button1만 클릭해야 #div1과 #layer_backgroud 두아이디가 display : block 과 none이 되고있어요
#div1 레이어 영역을 제외한 밖의 #layer_backgroud 아이디를 클릭해도 block과 none이 되게 하고싶어서요 혹시 어디부분을 수정해야할까요?
해당부분 구글링으로 찾아보니 mouseup를 말씀해주셔서 적용해보니 정상적으로 적용은되지만
button1부분에 addClass부분은 적용이 안되네요
내용
#layer_background의 스타일은 밑에 스타일로 적용했어요~!
</p>
<p>#layer_background {
display:none;
position:fixed;
left: 0;
top: 0;
z-index: 1001;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
}</p>
<p>
$(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개
Dessi#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 에 오타가 있네요. 확인해보셔야 할것 같아요.
댓글을 작성하려면 로그인이 필요합니다.
kkama9layer_background 닫는 이벤트를 걸으세요
div1 의 z-index 는 백그라운드보다 큰수로 잡으세요
z-index 의 최대값은 가급적 1000 보다 작은수를 유지하세요 (필수는 아닙니다 )
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
