단비의 코딩 공부 blog

[javascript] 팝업 레이어 (24시간 동안 보지 않기 기능) 본문

javascript&jquery

[javascript] 팝업 레이어 (24시간 동안 보지 않기 기능)

황굽달 2022. 9. 29. 09:50

HTML

<div id="popup_0" class="popup_num">
	<div class="popup1">
		<img src="./img/poster3.jpg	">
		<p class="close1">
			<label for="chkbox0">
				<input type="checkbox" name="chkbox0" id="chkbox0" onclick="closeByToday(0)">
				24시간 동안 다시 열람하지 않습니다.
			</label>
			<button class="closeBtn1" onClick="layerClose(0);">닫기</button>
		</p>
	</div>
</div>

css

#popup_0 {z-index: 1000; position: relative; width: 600px; height: 0; top: 118px; left: 0;}
.popup1 { position: absolute; border: 1px solid #e9e9e9;background: #fff;}
.close1 {padding: 10px 0;background: #000; color: #fff; text-align: right; padding-right:10px;margin-top: -5px;}
.close1 button {margin-right: 5px; padding: 5px 10px;border: 0;background: #393939;color: #fff; font-family: "Noto Sans KR", sans-serif; font-size: 14px;}
.close1 label {margin-right: 5px; padding:2px 5px 4px 10px; border: 0;background: #393939;color: #fff;}
p{padding: 0; margin: 0;}
input#chkbox0{display: none;}

javascript


function layerClose(id) {
    document.getElementById("popup_" + id).style.display = "none";
}
function closeByToday(id){
    if (document.getElementById("chkbox" + id).checked) {
        setCookie("popup_" + id, "done", 1);
    }
    document.getElementById("popup_" + id).style.display = "none";
    document.getElementById("chkbox" + id).checked = false;
}
function setCookie(name, value, expiredays) {
    var todayDate = new Date();
    todayDate.setDate(todayDate.getDate() + expiredays);
    document.cookie = name + "=" + escape(value) + "; path=/; expires=" + todayDate.toGMTString() + ";";
}



    var pop_length = $(".popup_num").length;
    var cookiedata = document.cookie;
    for (i=0;i<pop_length;i++) {
        if (cookiedata.indexOf("popup_" + i + "=done") < 0 ) {
            document.getElementById("popup_" + i).style.display = "block";
        } else {
            document.getElementById("popup_" + i).style.display = "none";
        }
    }