부트스트랩 이용 모달(팝업)창을 띄우고 오늘 하루 더 이상 보지 않기 기능 추가하기

5월 16일 오늘은 아이유님의 생일입니다. 축하 기념 공지를 띄워보도록 하겠습니다. 

 

모달과 팝업의 차이

 

본문에 들어가기 앞서 모달과 팝업에 대해서 간략하게 언급하겠습니다. 둘이 비슷하게 메인 윈도우에 또 다른 윈도우를 띄우는 기능을 하고 있습니다.

 

그러나 팝업의 경우에는 완전 다른 윈도우라면 모달은 부모 자식간의 관계를 유지하고 있습니다. 또한 팝업 차단 기능으로 개발자의 의도와는 상관없이 사용자가 제어가 가능하지만 모달은 그게 아니라고 합니다.

 

그래서 요즘은 모달을 많이 쓰는 추세라고 합니다. 

 

참고

 

https://bomango.tistory.com/57

모달창 VS 팝업창, 차이가 뭔데?

 

모달창 띄우기

 

저는 부트스트랩을 이용해서 모달창을 띄워볼게요.

 

https://getbootstrap.com/docs/4.0/components/modal/

Modal

 

부트스트랩 공식 문서를 그대로 이제 따라하면 절반은 갑니다.

 

<div class="modal" id="myModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">공지</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>블라블라</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id = "modal-today-close">today</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

 

모달창은 header,body,footer로 이루어져있습니다. 디자인보다는 모달창이 뜨는지가 중요했기에 저는 타이틀, 바디 내용, 버튼 수정을 했습니다.

 

만약에 딱 이렇게만 작성을 하시면 아무것도 뜨지가 않습니다. 저는 index에 접속하자마자 바로 모달(공지)가 저를 반겨주길 원했는데요. 한국어로 된 상위권 포스팅들은 다들 버튼 트리거를 이용하셔서 제게 필요한 내용은 아니었습니다. 

 

스택오버플로우에서 답을 찾아냈습니다.

 

$("#getCodeModal").modal('show');

 

getCodeModal은 modal id값이 될테고 저는 myModal로 지정했습니다. 

 

 

헤헤헤 지으니어스에서 가져온 생일 축하 이미지입니다. css 다루다가 이미지가 잘린듯하지만 그래도 뿌듯합니다. 

 

오늘 하루 더 이상 보지 않기

 

이 기능은 쿠키를 제어해서 구현할 수 있습니다. 

 

function setCookie(name, value, expiredays){
    var today = new Date();
    today.setDate(today.getDate() + expiredays);
    document.cookie = name + '=' + escape(value) + '; expires=' + today.toGMTString();
}

function getCookie(name) {
    var cookie = document.cookie;
    if (document.cookie != "") {
        var cookie_array = cookie.split("; ");
        for ( var index in cookie_array) {
            var cookie_name = cookie_array[index].split("=");
            if (cookie_name[0] == "mycookie") {
                return cookie_name[1];
            }
        }
    }
    return;
}
$("#modal-today-close").click(function() {
    $("#myModal").modal("hide");
    setCookie("mycookie", 'popupEnd', 1);
})

var checkCookie = getCookie("mycookie");

if(checkCookie == 'popupEnd') {
    $("#myModal").modal("hide");
} else {
    $('#myModal').modal("show");
}

 

'오늘 하루'라는게 조금 애매합니다. 16일 하루인지 아니면 버튼 클릭한 시점으로부터 24시간인지 애매한데 저는 24시간으로 두었습니다. 쿠키 유효기간을 지정해서 쿠키를 만들어줍니다. getCookie는 setCookie에서 지정해놓은 문자열을 파싱하고 있습니다. 그래서 만약에 쿠키값이 있다면 모달을 숨기고 없다면 display해주는 방식입니다.

 

저는 이 코드를 아래 포스팅에서 가져왔고 변수명만 제 쪽에 맞게 수정해서 사용했습니다.

 

https://hi-today-yun12.tistory.com/13

[JavaScript] 모달 창 하루 동안 안 열기

 

+ 매우 당연한 얘기지만 서버를 재시작한다고 해서 쿠키가 날라가지는 않습니다.