[JavaScript] 팝업 띄우기

팝업 띄우기

오늘 그만보기 기능을 추가하여 간단한 팝업을 만들어봄

 

팝업 html 👇

<!-- layer popup content -->
<div class="layerPopup" id="layer_popup">
    <div class="layerBox">
            <p>
                <img src="/static/member/img/popupimg.jpg" usemap="#popup" alt="event page">
            </p>
        <form name="pop_form">
            <div id="check" ><input type="checkbox" name="chkbox" value="checkbox" id='chkbox' >
                <label for="chkbox">오늘 그만보기</label></div>
            <div id="close" ><a href="javascript:closePop();">닫기</a></div>
        </form>
    </div>
</div>

해당 경로에 이미지 추가 필요

 

팝업 js 👇

// 팝업 다시보지 않기
$("#check").click(function () {
    if ( document.pop_form.chkbox.checked ){
        setCookie( "mainPopup", "done" , 1 );
    }
    $(".layerPopup").addClass("hide");
});

 // 쿠키 세팅
function setCookie( name, value, expireDays ) {
    const todayDate = new Date();
    todayDate.setDate( todayDate.getDate() + expireDays );
    document.cookie = name + "=" + value + "; path=/; expires=" + todayDate.toUTCString() + ";"
}

// 팝업 닫기
function closePop() {
    $(".layerPopup").addClass("hide");
}

 

팝업 css 👇

/* ============ 메인 팝업 ============ */
.layerPopup img{margin-bottom:20px;}
.layerPopup:before {display:block; content:""; position:fixed; top:0; width:500px; height:100%; background:rgba(0,0,0,.5); z-index:9000}
.layerPopup .layerBox {z-index:10000; position:fixed; background:#fff; top:73pt; margin-left:19.5pt;}
.layerPopup .layerBox img{width:320pt;height:444pt; margin-bottom:0;}
.layerPopup .layerBox .title {margin-bottom:10px; padding-bottom:10px; font-weight:600; border-bottom:1px solid #d9d9d9;}
.layerPopup .layerBox .btnTodayHide {font-size:14px; font-weight:600; color:black; float: left;text-decoration:none;width:150px; height:30px;line-height:30px;border:black solid 1px; text-align:center; text-decoration:none;}
.layerPopup form {display:inline-flex;}
.layerPopup form #check {border-right:solid 1px #aeadad;}
.layerPopup form div {cursor:pointer;margin-top: 16pt; margin-bottom:17pt; width:160pt; text-align:center; }
.layerPopup form label, .layerPopup form a {font-size:15pt;cursor:pointer; height:30px; line-height:17pt}
.layerPopup #close {font-size:16px; height:30px; color:black; float:right; text-align:center;text-decoration:underline;}

css의 경우 자신의 프로젝트 환경에 맞게 변경이 필요함