File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
// popup.js
// 페이지 로드 시 초기 실행
$(function () {
tooltip(); // 팝업 열기/닫기 제어
accessibilityFocus(); // 접근성 포커스 이동 제어
});
// =========================================
// 1️⃣ 접근성 포커스 강제 이동
// -----------------------------------------
function accessibilityFocus() {
$(document).on('keydown', '[data-focus-prev], [data-focus-next]', function (e) {
const next = $(e.target).attr('data-focus-next');
const prev = $(e.target).attr('data-focus-prev');
const target = next || prev || false;
// Tab 키(9) 외에는 작동 X
if (!target || e.keyCode !== 9) return;
// Shift+Tab : 이전 / Tab : 다음
if ((!e.shiftKey && !!next) || (e.shiftKey && !!prev)) {
$('[data-focus="' + target + '"]').focus();
}
});
}
// =========================================
// 2️⃣ Tooltip(팝업) 열기/닫기 제어
// -----------------------------------------
function tooltip() {
const openBtn = '[data-tooltip]'; // 팝업 열기 버튼 (data-tooltip="팝업ID")
const closeBtn = '.tooltip-close'; // 팝업 닫기 버튼
const mask = '.mask'; // 배경 마스크 (dimmed)
// 👉 열기 대상 찾기 함수
function getTarget(el) {
if ($(el).is('[data-tooltip]')) {
return $(el).attr('data-tooltip');
} else {
return $(el).closest('[data-tooltip]').attr('data-tooltip');
}
}
// 👉 팝업 열기 함수
function openPopup(id) {
const $popup = $('[data-tooltip-con="' + id + '"]');
const $mask = $(mask);
if (!$popup.length) return;
$popup.show().attr('aria-hidden', 'false').focus();
$mask.show();
$('body').css('overflow', 'hidden');
// 가운데 정렬
centerPopup($popup);
// 닫기 버튼에 현재 활성 팝업 ID 저장
$popup.find(closeBtn).data('activeTarget', id);
}
// 👉 팝업 닫기 함수
function closePopup(id) {
const $popup = $('[data-tooltip-con="' + id + '"]');
const $mask = $(mask);
if (!$popup.length) return;
$popup.hide().attr('aria-hidden', 'true');
$('[data-tooltip="' + id + '"]').focus();
$mask.hide();
$('body').css('overflow', 'inherit');
}
// 👉 팝업 열기 이벤트
$(document).on('click', openBtn, function (e) {
e.preventDefault();
const id = getTarget(e.target);
openPopup(id);
});
// 👉 팝업 닫기 이벤트
$(document).on('click', closeBtn, function (e) {
e.preventDefault();
const id = $(this).data('activeTarget');
closePopup(id);
});
// ESC 키로 닫기
$(document).on('keydown', function (e) {
if (e.key === 'Escape') {
const $popup = $('[data-tooltip-con]:visible');
if ($popup.length) {
const id = $popup.attr('data-tooltip-con');
closePopup(id);
}
}
});
}
// =========================================
// 3️⃣ 팝업 중앙정렬 (리사이즈 대응)
// -----------------------------------------
function centerPopup($popup) {
const popW = $popup.outerWidth();
const popH = $popup.outerHeight();
const winW = $(window).outerWidth();
const winH = $(window).outerHeight();
const left = (winW - popW) / 2;
const top = (winH - popH) / 2;
$popup.css({
left: `${left}px`,
top: `${top}px`,
position: 'fixed'
});
}
// 리사이즈 시 팝업 위치 재조정
$(window).on('resize', function () {
const $visiblePopup = $('[data-tooltip-con]:visible');
if ($visiblePopup.length) {
centerPopup($visiblePopup);
}
});