팝업 시작 시간과 종료하는 시간 설정하는 코드
구글 블로그에서 팝업 띄우기 위해 애를 먹었는데요, 딱 하나 js, css 파일을 불러오는 html 코드를 넣는 위치에서 팝업이 제대로 나타났습니다. 그 위치는 바로 아래에 html 코드를 넣어야 합니다. 바로 들어가겠습니다.
// timepopup.js 파일
$(document).ready(function () {
// 페이지 로드 후 2024년 2월 16일 오전 10시 뒤에 팝업을 보여줍니다.
var showDate = new Date(2024, 1, 16, 9, 50, 0); // 년, 월(0부터 시작), 일, 시, 분, 초
var currentDate = new Date();
// 2024년 2월 16일 밤 12시에 팝업을 숨깁니다.
var hideDate = new Date(2024, 1, 16, 10, 45, 59);
// 팝업을 보여주는 함수
function showPopup() {
$('#popupContainer').fadeIn();
}
// 팝업을 숨기는 함수
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);
});
});
이 자바스크립터는 시간 설정 이후에 방문자가 새로고침을 하거나 페이지를 새로 띄우면 팝업이 나타나는 코드입니다. 하지만 한 번 클릭한 뒤로는 팝업을 볼 수 없습니다. 쿠키값을 삭제해도 다시는 볼 수 없네요.
이번에는 딱 한 번만 보여주는 팝업 코드입니다.
// 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);
});
}
});
이 역시 제대로 테스트는 할 수 없었습니다. 코드에서는 특별히 이상한 것은 없습니다. 분명한 것은 시간을 설정하면 정해진 시간에는 팝업이 사라집니다.
이번에는 항상 팝업이 올라오는 코드입니다.
// timepopup_alway.js 파일 새로고침하면 다시 팝업이 올라오게
$(document).ready(function () {
// 페이지 로드 후 2024년 2월 16일 오전 10시 뒤에 팝업을 보여줍니다.
var showDate = new Date(2024, 1, 16, 10, 0, 0); // 년, 월(0부터 시작), 일, 시, 분, 초
var currentDate = new Date();
// 2024년 2월 16일 밤 12시에 팝업을 숨깁니다.
var hideDate = new Date(2024, 1, 16, 23, 59, 59);
// 팝업을 보여주는 함수
function showPopup() {
$('#popupContainer').fadeIn();
}
// 팝업을 숨기는 함수
function hidePopup() {
$('#popupContainer').fadeOut();
}
// 2024년 2월 16일 오전 10시 이후에 팝업을 보여주기
if (currentDate >= showDate) {
showPopup();
}
// 2024년 2월 16일 밤 12시 이전까지 팝업을 보여준 상태에서 숨기기
if (currentDate <= hideDate) {
var hideTimeout = setTimeout(hidePopup, hideDate - currentDate);
// 팝업 닫기 버튼 클릭 시 팝업을 숨깁니다.
$('#closePopupButton').click(function () {
hidePopup();
// clearTimeout을 사용하여 타이머 제거 (선택사항)
clearTimeout(hideTimeout);
});
}
});
위의 파일을 각 js, css로 만들고 저장합니다. 호스팅이 아니라도 티스토리에 게시물 하나 만들어 저장하고 그 주소를 활용하고 게시글은 비공개하면 됩니다. 이 팝업 코드는 몇 번을 확인했고 적용하고 있습니다.
이제는 위에서 저장한 파일을 불러오는 html 코드입니다 이 코드는 구글 블로그라면 <body> 바로 아래에 넣습니다.
<!--외부 파일을 불러오는 코드-->
<link href='경로/popup.css' rel='stylesheet' type='text/css'/>
<script src='https://code.jquery.com/jquery-3.6.4.min.js'></script>
<script src='경로/timepopup.js'></script>
<!--popup.html 파일을 불러오는 코드-->
<div id='popupContainer'>
<!--popup.html 파일의 내용-->
<h2>Popup Title</h2>
<p>The popup opens like this.</p>
<button id='closePopupButton'>Close</button>
</div>
아래 팝업 버튼을 누르면 팝업을 확인할 수 있습니다. 이 팝업은 28년 12월 31일까지 보이게 됩니다. 그때까지 이 블로그가 계속될 수 있을까요. 날짜에서 월은 0부터 시작합니다. 1월이 0이 되니 12월이면 11로 적습니다. 나머지는 일반적으로 알고 있는 시간을 적으면 됩니다.
// 2028년 12월 31일 밤 12시에 팝업을 숨깁니다.
var hideDate = new Date(2028, 11, 31, 23, 59, 59);
This is the content of the popup.
버튼용 코드는 약간 다른데요, 마저 보겠습니다.
/* 팝업 버튼 css */
#showPopupButton {
padding: 5px 10px;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
/* 롤오버 시 배경색 변경 */
#showPopupButton:hover {
background-color: #2980b9;
}
/* 팝업 컨테이너 스타일 */
#popupContainer {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
z-index: 9999;
}
/* 팝업 내용 스타일 */
#popupContainer h2 {
color: #333;
}
#popupContainer p {
color: #666;
}
#closePopupButton {
margin-top: 10px;
padding: 5px 10px;
cursor: pointer;
}
<!- 외부 파일 불러오는 html -->
<!-- 클릭 시 팝업을 보여주는 버튼 -->
<button id="showPopupButton">Show Popup</button>
<div id="popupContainer">
<!-- 팝업 내용 -->
<h2>Popup Title</h2>
<p>This is the content of the popup.</p>
<!-- 팝업 닫기 버튼 -->
<button id="closePopupButton">Close</button>
</div>
<link href='https://경로/popup_button.css' rel='stylesheet' type='text/css'/>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https:/경로/timepopup_alway_button.js"></script>
팝업 버튼 수정은 숙제로 남겨놓겠습니다.
구글 블로그에 팝업 간단하게 만드는 소스(시간 설정없는 팝업)