[초보] body 클릭 시 창(메시지 팝업) 닫기

[초보] body 클릭 시 창(메시지 팝업) 닫기

QA

[초보] 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>
답변을 작성하시기 전에 로그인 해주세요.
전체 612
QA 내용 검색

회원로그인

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