본문 바로가기
JavaScript

[JavaScript] 팝업 날짜 지정

by Yeoseungwon 2024. 2. 22.
728x90
<div class="popup" id="popup2" style="left: 26%;"  data-expired="2024-02-24 08:01">
		<a>
			<img src="/camp/images/pop_240222.png" style="width:100%;">
		</a>
		<div class="popupFooter">
			<div class="notOpen" style="margin-top: 7px;">
				<label style="margin-right: 6px; cursor: pointer;">
				<input type="checkbox" name="chkClose" id="popup2_notToday" class="pbtn cbtn" style="display: inline-block; -webkit-appearance: checkbox;" title="닫기"> 오늘 하루 이 창을 열지 않음</label>
				<a href="javascript:close_popup('popup2');" style="padding-right: 10px; cursor: pointer;">[닫기]</a>
			</div>
		</div>
	</div>

 

.popup p span{font-size:20px}
#popup1, #popup2, #popup3, #popup4 {
	position: absolute;
	top: 7%;
	max-width: 400px;
    width: 78%;
	height: auto;
	padding: 10px;
	border: 1px solid rgb(221, 221, 221);
	background: rgb(255, 255, 255);
	box-shadow: 2px 2px 6px #666;
	display: none;
}
var today = new Date();

// html 에서 data-expired 가 설정된 팝업 div 들 찾기
var popup = document.querySelectorAll('[data-expired]');
for (var i = 0, size = popup.length; i < size; i++) {
    // 문자열을 공백, -, : 으로 나눠서 배열로 저장
    var d = popup[i].getAttribute('data-expired').split(/[\s,\-:]+/);
    var expired_date = new Date(d[0], d[1] - 1, d[2], d[3] || 24, d[4] || 0);

    // 오늘이 설정한 expired date 전이면 팝업창 보여지게
    if (today < expired_date) {
        popup[i].style.display = 'block';
    }
    // 아니면 html 에서 삭제 시킴
    else {
        popup[i].parentElement.removeChild(popup[i]);
    }
}
728x90

'JavaScript' 카테고리의 다른 글

ajax post - controller return값  (0) 2024.11.07
[JavaScript] 팝업  (0) 2024.02.16
[JavaScript] 이미지 슬라이드 소스  (1) 2023.12.05
[Swiper] 라이브러리 포커스이동  (0) 2023.11.17
[JavaScript] onkeydown  (0) 2023.10.24