제이쿼리 다중팝업 변수처리
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Popup Example</title>
<style>
.popup_teacher {
position: absolute;
display: none;
/*z-index: 1000;*/
}
.popup_teacher_wrap img {
display: block;
}
.popup_teacher_footer {
display: flex;
justify-content: space-between;
padding: 5px;
}
</style>
</head>
<body>
<div id="popup-container"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script language="Javascript">
// 팝업 데이터 배열 정의
const popupData = [
{ teacherName: "ysh", teacherMonth: "2022", teacherWidth: "600", linkUrl: "", isActive: true, teacherYear: "2025", target: "_blank" },
{ teacherName: "ysh", teacherMonth: "2022", teacherWidth: "600", linkUrl: "", isActive: false, teacherYear: "2025", target: "_self" },
{ teacherName: "xyz3", teacherMonth: "0306", teacherWidth: "500", linkUrl: "https://example.com/3", isActive: false, teacherYear: "2025", target: "_blank" }
];
// 쿠키 설정 함수
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;
}
$(document).ready(function() {
// 팝업 HTML 동적 생성
popupData.forEach(function(data) {
if (data.isActive) {
const popupHtml = `
<div id="popup_${data.teacherName}" class="popup_teacher">
<div class="popup_teacher_wrap" style="width:${data.teacherWidth}px;">
${data.linkUrl ?
`<a href="${data.linkUrl}" target="${data.target}">
<img src="/images/teacher/${data.teacherYear}/popup_${data.teacherName}_${data.teacherMonth}.png" alt="" border="0" style="width:${data.teacherWidth}px;" />
</a>` :
`<img src="/images/teacher/${data.teacherYear}/popup_${data.teacherName}_${data.teacherMonth}.png" alt="" border="0" style="width:${data.teacherWidth}px;" />`
}
<div class="popup_teacher_footer">
<div>
<input type="checkbox" name="imyong_${data.teacherName}1_1" value="imyong_${data.teacherName}1_1">
<font color="#818181" size="-1">오늘 하루 열지 않기</font>
</div>
<div>
<input type="checkbox" name="imyong_${data.teacherName}1_2" value="imyong_${data.teacherName}1_2">
<font color="#818181" size="-1">일주일간 열지 않기</font>
</div>
<div>
<img src="/images/teacher/2024/close_02.png" align="absmiddle" style="cursor:pointer;">
</div>
</div>
</div>
</div>
`;
$('#popup-container').append(popupHtml);
}
});
// 팝업 위치 조정 함수
function positionPopups() {
var offset = 20;
var topPosition = 50;
var leftPosition = 50;
var maxHeight = 0;
$('.popup_teacher').each(function() {
if ($(this).is(':visible')) {
$(this).css({
'top': topPosition + 'px',
'left': leftPosition + 'px'
});
var popupHeight = $(this).outerHeight();
maxHeight = Math.max(maxHeight, popupHeight);
leftPosition += parseInt($(this).find('.popup_teacher_wrap').css('width')) + offset;
}
});
}
// 팝업 초기화 함수
function initPopup(popupId, cookieName) {
if (!getCookie(cookieName)) {
$('#' + popupId).show();
} else {
$('#' + popupId).hide();
}
}
// 모든 팝업 초기화
popupData.forEach(function(data) {
if (data.isActive) {
initPopup(`popup_${data.teacherName}`, `imyong_${data.teacherName}1`);
}
});
// 이벤트 바인딩
$('.popup_teacher_footer input[type="checkbox"]').on('change', function() {
var $popup = $(this).closest('.popup_teacher');
var popupId = $popup.attr('id');
var cookieName = 'imyong_' + popupId.replace('popup_', '') + '1';
if ($(this).attr('name').endsWith('_1')) { // 오늘 하루
setCookie(cookieName, "done", 1);
$popup.hide();
} else if ($(this).attr('name').endsWith('_2')) { // 일주일간
setCookie(cookieName, "done", 7);
$popup.hide();
}
});
$('.popup_teacher_footer img').on('click', function() {
$(this).closest('.popup_teacher').hide();
});
// 팝업 위치 조정
positionPopups();
});
</script>
</body>
</html>