이전에 적용했던 팝업 코드에서 나타난 오류 수정입니다
팝업은 복잡하지 않아도 되는데, 여러가지 기능을 넣다보니 모르는 입장에서는 상당히 많은 코드가 들어갑니다. 하지만 방문자 입장에서는 아주 간단한 기능만 있으면 됩니다.
팝업을 끄면 그 날 하루에는 나타나지 않고, 새로고침하면 다시 보이는 것이 좋겠습니다. 그런데 앞서 적용한 팝업은 오늘은 보지 않기를 눌렀는데, 새로고침해도 그 다음날에도 팝업이 나타나지 않네요, 이것은 그렇다고 해도 지정된 날짜에서 더 이상은 팝업이 나타나지 않아야 되는데, 팝업 종료 날짜를 지정했는데도 해당 팝업이 올라옵니다. 이 문제를 수정합니다. 수정은 역시 인공지능을 능력빌렸습니다만, 아직 인공지능의 실력은 믿을 수 없기에 테스트가 필요합니다만, 지금 당장에는 결과를 알려드리지 못합니다. 하지만 수정하는 코드는 아래와 같습니다. 나머지 팝업 코드는 이전 포스팅을 참고하세요
// timepopup_one.js 파일, 한 번만 보여주기
$(document).ready(function () {
// 팝업을 이미 본 여부를 확인합니다.
var hasSeenPopup = localStorage.getItem('hasSeenPopup');
// 이미 본 경우에는 팝업을 보여주지 않습니다.
if (!hasSeenPopup) {
// 페이지 로드 후 2024년 2월 16일 오전 10시 뒤에 팝업을 보여줍니다.
var showDate = new Date(2024, 1, 16, 9, 34, 0); // 년, 월(0부터 시작), 일, 시, 분, 초
var currentDate = new Date();
// 2024년 2월 16일 밤 12시에 팝업을 숨깁니다.
var hideDate = new Date(2024, 1, 16, 10, 35, 59);
// 팝업을 보여주는 함수
function showPopup() {
$('#popupContainer').fadeIn();
// 팝업을 이미 본 여부를 로컬 스토리지에 기록합니다.
localStorage.setItem('hasSeenPopup', true);
}
// 팝업을 숨기는 함수
function hidePopup() {
$('#popupContainer').fadeOut();
}
// 이 부분은 아래 코드로 바꿉니다
// 2024년 2월 16일 오전 10시 이후에 팝업을 보여주기
if (currentDate < showDate) {
var showTimeout = setTimeout(showPopup, showDate - currentDate);
// 팝업 닫기 버튼 클릭 시 팝업을 숨깁니다.
$('#closePopupButton').click(function () {
hidePopup();
// clearTimeout을 사용하여 타이머 제거 (선택사항)
clearTimeout(showTimeout);
});
}
// 2024년 2월 16일 밤 12시 이전에 팝업을 숨기기
var hideTimeout = setTimeout(hidePopup, hideDate - currentDate);
// 팝업 닫기 버튼 클릭 시 팝업을 숨깁니다.
$('#closePopupButton').click(function () {
hidePopup();
// clearTimeout을 사용하여 타이머 제거 (선택사항)
clearTimeout(hideTimeout);
});
}
});
// 아래 코드로 수정합니다.
if (currentDate < showDate) {
var showTimeout = setTimeout(showPopup, Math.max(0, showDate - currentDate));
// 팝업 닫기 버튼 클릭 시 팝업을 숨깁니다.
$('#closePopupButton').click(function () {
hidePopup();
// clearTimeout을 사용하여 타이머 제거 (선택사항)
clearTimeout(showTimeout);
});
}