이미 존재하는 index.jsp 파일에 공지사항 같은 팝업을 특정 기간동안 표시할 때 추가하여 사용 가능.
팝업이 표시될 때, 메인화면이 약간 흐리게 표시된다.
1. head 태그 내부에 스타일 추가.
<head>
.
.
.
<style>
.layerPopup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 1000;
}
.popupContent {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
border-radius: 5px;
}
</style>
.
.
.
</head>
2. body 태그 내부에 팝업 내용과 스크립트 추가. 위치는 상관 없음.
<body>
.
.
.
<div id="layerPopup" class="layerPopup">
<div class="popupContent">
<h2>공지사항</h2>
<p>이 공지사항은 2024년 11월 1일부터 10일까지만 표시됩니다.</p>
<button onclick="closePopup()">닫기</button>
<label>
<input type="checkbox" id="dontShowAgain"> 오늘 하루 동안 보지 않기
</label>
</div>
</div>
<script>
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function closePopup() {
document.getElementById('layerPopup').style.display = 'none';
if(document.getElementById('dontShowAgain').checked) {
setCookie('popupClosed', 'true', 1);
}
}
window.onload = function() {
var currentDate = new Date();
var startDate = new Date('2024-11-01');
var endDate = new Date('2024-11-10');
if (currentDate >= startDate && currentDate <= endDate && !getCookie('popupClosed')) {
document.getElementById('layerPopup').style.display = 'block';
}
}
</script>
.
.
.
</body>
3. 파일의 최상단에 자바 코드 추가. 이미 있으면 생략 가능
<%@ page import="java.util.Date" %>
<%@ page import="java.text.SimpleDateFormat" %>
4. 결과 화면
'프로그래밍 > JAVA' 카테고리의 다른 글
| [JAVA] 문자열 ENCODING 확인 (1) | 2024.11.04 |
|---|---|
| [인텔리제이 IDE] 심볼을 찾을 수 없습니다. Cannot resolve symbol. 해결 방법 (0) | 2024.01.18 |
| [SpringBoot] Gradle에서 bootjar 실행시 Entry META-INF/MANIFEST.MF is a duplicate but no duplicate handling strategy has been set 오류 해결 방법 (0) | 2024.01.10 |
| Spring Quartz 표현식 정리 (1) | 2023.12.15 |
| Apache JMeter 5.2 설치 / 설정 (0) | 2023.08.31 |
댓글