팝업 만들때 팝업을 제외한 다른곳을 누를때 닫히게하는 방법좀 알수있을까요?
본문
팝업 만들때 팝업을 제외한 다른곳을 누를때 닫히게하는 방법좀 알수있을까요?
<div class="aa" style="width:100%; height:100%">
<div class="aa_con" class="width:300; height:300' "> 포지션 정가운데 정렬하고<div>
</div>
aa를 눌러서 닫게하고싶은데..aa_con을 눌러도 전체가 닫히는 현상으로 이벤트 버블링 막기
제이쿼리 not등을 사용해서 해보는데 해결이안되서요..
답변 2
<style>
.layer-popup {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 100;
}
.layer-popup.show {
display: block;
}
.modal-dialog {
width: 300px;
margin: 40px auto;
background-color: #fff;
}
.modal-content {
padding:10px 15px;
text-align: center;
line-height: 100px;
}
</style>
<script>
// 팝업 열기
$(document).on("click", ".btn-open", function (e){
var target = $(this).attr("href");
$(target).addClass("show");
});
// 외부영역 클릭 시 팝업 닫기
$(document).mouseup(function (e){
var LayerPopup = $(".layer-popup");
if(LayerPopup.has(e.target).length === 0){
LayerPopup.removeClass("show");
}
});
</script>
<a href="#layer-popup" class="btn-open">팝업 열기</a>
<div class="container">
<div class="layer-popup show" id="layer-popup">
<div class="modal-dialog">
<div class="modal-content">
팝업 내용입니다.
</div>
</div>
</div>
</div>
이벤트 감지 넣어서 클릭 타겟이 aa_con이면 false를 날리도록 해보세요
아마 eventlisten 에서 타깃 받아오면 될거에요
답변을 작성하시기 전에 로그인 해주세요.