토글 레이어 외부영역 닫기
본문
많은 조언으로 구글링해서 적용후 정상작동까지 확인했구요
부가적으로 이것저것 함수를 넣었더니
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 에 오타가 있네요. 확인해보셔야 할것 같아요.
layer_background 닫는 이벤트를 걸으세요
div1 의 z-index 는 백그라운드보다 큰수로 잡으세요
z-index 의 최대값은 가급적 1000 보다 작은수를 유지하세요 (필수는 아닙니다 )