[Jira Server/Data center] 공지 배너에 '닫기' 기능을 적용하는 방법
- 이혜진
Owned by 이혜진, created
문제
Jira의 공지 배너에 HTML, JavaScript 코드를 적용하여, 배너 닫기를 구현할 수 있습니다.
페이지 이동 후에도 닫힘 상태는 유지되며, 필요에 따라 배너가 보이지 않는 기간을 구현할 수 있습니다.
해결책
Jira 관리(⚙️) > 시스템 > 좌측 메뉴의 '공지 배너'를 클릭해 주세요.
‘알림 배너 수정’의 입력 란에 아래의 코드를 입력해 주세요.
아래는 ‘더 이상 보지 않기’ 버튼을 클릭하면, 배너를 더 이상 화면에 표시하지 않는 코드입니다.
쿠키를 삭제하면 배너는 다시 나타나므로, 테스트시 참고 부탁드립니다.
<div>
[작업 공지] 12월 01일 20:00 - 21:00 서버 점검 작업이 예정되어 있습니다.
해당 시간에는 서비스의 정상적인 이용이 불가하오니 이용에 참고 바랍니다.
<button onclick="closeBanner()" style="margin-left: 20px;">
더 이상 보지 않기 X
</button>
</div>
<style>
#announcement-banner { background-color: #cceaff;font-weight:bolder;}
</style>
<script>
if (localStorage.getItem('bannerClosed') === 'true') {
AJS.$('#announcement-banner').remove();
}
function closeBanner() {
AJS.$('#announcement-banner').remove();
localStorage.setItem('bannerClosed', 'true');
}
</script>
아래는 ‘하루 동안 보지 않기' 버튼을 누르면, 배너를 하루 동안 표시하지 않는 코드입니다.
ex) 3월 1일에 닫으면, 3월 2일에 배너를 다시 표시.
<div>
[작업 공지] 12월 01일 20:00 - 21:00 서버 점검 작업이 예정되어 있습니다.
해당 시간에는 서비스의 정상적인 이용이 불가하오니 이용에 참고 바랍니다.
<button onclick="closeBanner()" style="margin-left: 20px;">
하루 동안 보지 않기 X
</button>
</div>
<style>
#announcement-banner { background-color: #cceaff;font-weight:bolder;}
</style>
<script>
// 배너 상태 확인 및 날짜 검사
document.addEventListener('DOMContentLoaded', function() {
const closedDate = localStorage.getItem('bannerClosedDate');
const today = new Date().toDateString(); // 오늘 날짜 (시간 제외)
if (closedDate === today) {
// 오늘 이미 닫았다면 배너 숨김
document.getElementById('announcement-banner').style.display = 'none';
} else {
// 오늘이 아니라면 localStorage에서 삭제하고 배너 보임
localStorage.removeItem('bannerClosedDate');
document.getElementById('announcement-banner').style.display = '';
}
});
function closeBanner() {
const today = new Date().toDateString(); // 오늘 날짜 (시간 제외)
localStorage.setItem('bannerClosedDate', today); // 오늘 날짜 저장
document.getElementById('announcement-banner').style.display = 'none';
}
</script>