[초보] body 클릭 시 창(메시지 팝업) 닫기
본문
<div class="member_wrap after float_r">
<div class="message po_rel">
<div class="bell new"><!-- 새로운 메시지 있을 때는 new 클래스 -->
<img src="/fontawesome/svgs/solid/bell.svg" alt="">
</div>
<div class="message_list"> <!-- 이게 .bell을 클릭하면 나오는 메시지 목록 창입니다. -->
<ul>
<li><a href="">참여자로 지정된 프로젝트가 있습니다. {프로젝트명}</a></li>
<li><a href="">참여자로 지정된 프로젝트가 있습니다. {프로젝트명}</a></li>
<li><a href="">참여자로 지정된 프로젝트가 있습니다. {프로젝트명}</a></li>
<li><a href="">참여자로 지정된 프로젝트가 있습니다. {프로젝트명}</a></li>
<li><a href="">참여자로 지정된 프로젝트가 있습니다. {프로젝트명}</a></li>
<li><a href="">참여자로 지정된 프로젝트가 있습니다. {프로젝트명}</a></li>
</ul>
</div>
</div>
</div>
<script>
$(".message .bell").click(function(){
$(".message_list").slideToggle(100).toggleClass('open');
});
</script>
.bell을 클릭하면 .message_list가 나오도록 스크립트를 작성했는데,
.message_list가 나왔을 때는 (.message_list.open일 때는)
body를 클릭해도, .bell을 클릭해도 창이 닫혔으면 좋겠습니다.
어떻게 스크립트를 수정하면 될까요?
답변 1
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<div class="member_wrap after float_r">
<div class="message po_rel">
<div class="bell new"><!-- 새로운 메시지 있을 때는 new 클래스 -->
<img src="/fontawesome/svgs/solid/bell.svg" alt="">
</div>
<div class="message_list"> <!-- 이게 .bell을 클릭하면 나오는 메시지 목록 창입니다. -->
<ul>
<li><a href="">참여자로 지정된 프로젝트가 있습니다. {프로젝트명}</a></li>
<li><a href="">참여자로 지정된 프로젝트가 있습니다. {프로젝트명}</a></li>
<li><a href="">참여자로 지정된 프로젝트가 있습니다. {프로젝트명}</a></li>
<li><a href="">참여자로 지정된 프로젝트가 있습니다. {프로젝트명}</a></li>
<li><a href="">참여자로 지정된 프로젝트가 있습니다. {프로젝트명}</a></li>
<li><a href="">참여자로 지정된 프로젝트가 있습니다. {프로젝트명}</a></li>
</ul>
</div>
</div>
</div>
<script>
// $(".message .bell").click(function(){
// $(".message_list").slideToggle(100).toggleClass('open');
// });
$('body').on('click', function(evt){
var obj_target = $(evt.target).closest('.message .bell').get(0);
if (obj_target !== undefined) {
$(".message_list").slideToggle(100).toggleClass('open');
} else {
// var has_open = $(".message_list").hasClass('open');
var has_open = $(".message_list").css('display') != 'none';
if (has_open == true) {
$(".message_list").slideToggle(100).removeClass('open');
}
}
});
</script>
너무 작동 잘합니다. 감사합니다.
답변을 작성하시기 전에 로그인 해주세요.
