레이어 팝업
- 하루동안(기간동안?) 그만 보기
- 팝업 끝나는 날짜 설정하여 자동으로 내리기
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.pop {margin:0 auto; max-width:800px;}
.pop .title {margin:10px 0; font-size:25px; font-weight:600; text-align:center;}
.pop p {line-height:20px; font-size:14px;}
.pop {display:none;}
.pop:before {display:block; content:""; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.5);}
.pop .layerBox {position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); padding:30px; background:#fff; border-radius:6px;}
.pop .layerBox .title {margin-bottom:10px; padding-bottom:10px; font-weight:600; border-bottom:1px solid #d9d9d9; text-align: left;}
.pop .layerBox .cont {margin-bottom:40px;}
.pop .layerBox p {line-height:20px; font-size:13px;}
.pop .layerBox .btnClose {display:inline-block; padding:6px 12px; color:#444; font-size:12px; text-decoration:underline;}
.pop .layerBox .btnTodayHide {font-size:13px; font-weight:600; text-decoration:underline;}
</style>
</head>
<body>
<div id="pop" class="pop">
<div class="layerBox">
<h1 class="title">레이어팝업 타이틀</h1>
<div class="cont">
<p>lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="close">
<span id="check" class="btnTodayHide"><input type="checkbox" value="checkbox" name="chkbox" id="chkday"/><label for="chkday">오늘 하루동안 보지 않기</label></span>
<span id="close" class="btnClose"> <a href="#0">닫기</a></span>
<span id="close1" class="btnClose"> <a href="#0">닫기</a></span>
</div>
</div>
</div>
<div class="contents">
<h1 class="title">본문 제목</h1>
<p>
본문 내용
</p>
</div>
<script>
(function(){
const pop = document.querySelector('#pop');
const close = document.querySelector('#close');
function now () {
const popDt = new Date(),
popYear = popDt.getFullYear(),
popMonth = popDt.getMonth() + 1,
popDate = popDt.getDate(),
popHours = popDt.getHours(),
popMin = popDt.getMinutes(),
popSecond = popDt.getSeconds();
return popYear+'-'+(popMonth<10?'0'+popMonth:popMonth)+'-'+(popDate<10?'0'+popDate:popDate)+'-'+popHours+'-'+popMin+'-'+popSecond;
};
function endDate() {
const endYear = "2022",
endMonth = "11",
endDate = "12",
endHours = "11",
endMin = "50",
endSecond = "00";
return endYear+'-'+(endMonth<10?'0'+endMonth:endMonth)+'-'+(endDate<10?'0'+endDate:endDate)+'-'+endHours+'-'+endMin+'-'+endSecond;
};
function dayNone() {
if(now() > endDate()){
pop.style.display = 'none';
}
};
const getCookie = function (cname) {
const name = cname + "=";
const ca = document.cookie.split(';');
for(let i = 0; i <ca.length; i++) {
const c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) != -1) return c.substring(name.length,c.length);
}
return "";
};
const setCookie = function (cname, cvalue, exdays) {
const todayDate = new Date();
todayDate.setTime(todayDate.getTime() + (exdays*24*60*60*1000));
const expires = "expires=" + todayDate.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
};
const couponClose = function(){
if(document.querySelector('input[name="chkbox"]').checked === true){
setCookie("close","Y",1);
}
pop.style.display = 'none';
};
const cookiedata = document.cookie;
if(cookiedata.indexOf("close=Y")<0){
pop.style.display = 'block';
dayNone();
}else{
pop.style.display = 'none';
}
close.addEventListener('click', function(){
couponClose();
});
})();
</script>
</body>
</html>
참고사이트1
참고사이트2
참고사이트3(레이어팝업 2개이상 띄우기)