first commit 2
This commit is contained in:
hmw1001
@@ -0,0 +1,52 @@
|
||||
<?php
|
||||
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
|
||||
?>
|
||||
|
||||
<!-- 팝업레이어 시작 { -->
|
||||
<div id="hd_pop">
|
||||
<?php
|
||||
for ($i=0; $nw=sql_fetch_array($result); $i++)
|
||||
{
|
||||
// 이미 체크 되었다면 Continue
|
||||
if (isset($_COOKIE["hd_pops_{$nw['nw_id']}"]) && $_COOKIE["hd_pops_{$nw['nw_id']}"])
|
||||
continue;
|
||||
?>
|
||||
|
||||
<div id="hd_pops_<?php echo $nw['nw_id'] ?>" class="hd_pops" style="top:<?php echo $nw['nw_top']?>px;left:<?php echo $nw['nw_left']?>px">
|
||||
<div class="hd_pops_con" style="width:<?php echo $nw['nw_width'] ?>px;height:<?php echo $nw['nw_height'] ?>px">
|
||||
<?php echo conv_content($nw['nw_content'], 1); ?>
|
||||
</div>
|
||||
<div class="hd_pops_footer">
|
||||
<?php // 💡 [개선] '오늘 하루' 대신 관리자에서 설정한 시간으로 표시되도록 수정 ?>
|
||||
<button class="hd_pops_reject hd_pops_<?php echo $nw['nw_id']; ?> <?php echo $nw['nw_disable_hours']; ?>"><strong><?php echo $nw['nw_disable_hours']; ?></strong>시간 동안 다시 열람하지 않습니다.</button>
|
||||
<button class="hd_pops_close hd_pops_<?php echo $nw['nw_id']; ?>">닫기</button>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
} // end for
|
||||
?>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
jQuery(function($) {
|
||||
// "n시간 동안 다시 열람하지 않음" 버튼
|
||||
$(".hd_pops_reject").click(function() {
|
||||
var classes = $(this).attr('class').split(' ');
|
||||
var id = classes[1]; // hd_pops_1
|
||||
var hours = parseInt(classes[2]); // 24
|
||||
|
||||
if (hours > 0) {
|
||||
set_cookie(id, 1, hours, g5_cookie_domain);
|
||||
}
|
||||
$("#" + id).css("display", "none");
|
||||
});
|
||||
|
||||
// "닫기" 버튼
|
||||
$('.hd_pops_close').click(function() {
|
||||
var classes = $(this).attr('class').split(' ');
|
||||
var id = classes[1]; // hd_pops_1
|
||||
$('#' + id).css('display', 'none');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<!-- } 팝업레이어 끝 -->
|
||||
@@ -0,0 +1,109 @@
|
||||
<?php
|
||||
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
|
||||
|
||||
// 💡 [핵심 수정] 이 스킨 파일이 직접 팝업 데이터를 가져오도록 DB 조회 로직을 추가합니다.
|
||||
// 이 로직은 head.php에서 이 파일을 include 하기 전에 $result 변수를 준비합니다.
|
||||
if (!defined('_SHOP_')) {
|
||||
$pop_division = 'comm';
|
||||
} else {
|
||||
$pop_division = 'shop';
|
||||
}
|
||||
|
||||
$sql = " SELECT * FROM {$g5['new_win_table']}
|
||||
WHERE '".G5_TIME_YMDHIS."' BETWEEN nw_begin_time AND nw_end_time
|
||||
AND nw_device IN ( 'both', 'pc' )
|
||||
AND nw_division IN ( 'both', '{$pop_division}' )
|
||||
ORDER BY nw_id ASC ";
|
||||
|
||||
$result = sql_query($sql, false);
|
||||
|
||||
|
||||
// 이 스킨의 CSS 파일을 불러옵니다.
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/skin/newwin/modal/style.css?ver='.G5_CSS_VER.'">', 0);
|
||||
|
||||
// 💡 [핵심] 표시할 팝업이 있는지 먼저 확인합니다.
|
||||
$popups_to_show = [];
|
||||
// 💡 [안정성] sql_query()가 실패할 경우를 대비하여 $result가 유효한지 확인합니다.
|
||||
if ($result) {
|
||||
while ($nw = sql_fetch_array($result)) {
|
||||
// 쿠키가 설정된 팝업은 건너뜁니다.
|
||||
if (isset($_COOKIE["rb_newwin_{$nw['nw_id']}"]) && $_COOKIE["rb_newwin_{$nw['nw_id']}"]) {
|
||||
continue;
|
||||
}
|
||||
$popups_to_show[] = $nw;
|
||||
}
|
||||
}
|
||||
$popup_count = count($popups_to_show);
|
||||
?>
|
||||
|
||||
<?php if ($popup_count > 0): // 💡 표시할 팝업이 1개 이상일 때만 전체 구조를 출력합니다. ?>
|
||||
<!-- 팝업레이어 시작 -->
|
||||
<!-- 💡 [접근성 개선] role과 aria 속성을 추가하여 스크린 리더 사용자에게 더 나은 경험을 제공합니다. -->
|
||||
<div id="rb_newwin_modal_wrapper" class="rb-modal-overlay" role="dialog" aria-modal="true">
|
||||
<div class="rb-modal-grid-container">
|
||||
<?php
|
||||
foreach ($popups_to_show as $nw) {
|
||||
?>
|
||||
<div id="rb_newwin_<?php echo $nw['nw_id'] ?>" class="rb-modal-card">
|
||||
<div class="rb-modal-content" style="width:<?php echo (int)$nw['nw_width'] ?>px;">
|
||||
<!-- 💡 [접근성 개선] aria-label을 추가하여 버튼의 역할을 명확히 합니다. -->
|
||||
<button type="button" class="rb-modal-close" data-nw-id="<?php echo $nw['nw_id']; ?>" aria-label="팝업 닫기">×</button>
|
||||
|
||||
<div class="rb-modal-body" style="height:<?php echo (int)$nw['nw_height'] ?>px;">
|
||||
<div class="rb-modal-body-inner">
|
||||
<?php echo conv_content($nw['nw_content'], 1); ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rb-modal-footer">
|
||||
<button type="button" class="rb-modal-reject" data-nw-id="<?php echo $nw['nw_id']; ?>" data-hours="<?php echo (int)$nw['nw_disable_hours']; ?>">
|
||||
<strong><?php echo (int)$nw['nw_disable_hours']; ?></strong>시간 동안 보지 않기
|
||||
</button>
|
||||
<button type="button" class="rb-modal-close" data-nw-id="<?php echo $nw['nw_id']; ?>">닫기</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
} // end foreach
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
jQuery(function($) {
|
||||
const $wrapper = $("#rb_newwin_modal_wrapper");
|
||||
|
||||
/**
|
||||
* 💡 [리팩토링] 팝업 카드를 닫는 공통 함수
|
||||
* @param {string} nw_id - 닫을 팝업의 ID
|
||||
*/
|
||||
function closePopupCard(nw_id) {
|
||||
const $card = $("#rb_newwin_" + nw_id);
|
||||
$card.fadeOut(300, function() {
|
||||
// 카드가 사라진 후, 보이는 카드가 없으면 전체 오버레이를 닫습니다.
|
||||
if ($wrapper.find('.rb-modal-card:visible').length === 0) {
|
||||
$wrapper.fadeOut();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// "n시간 동안 보지 않기" 버튼 클릭 시
|
||||
$wrapper.on("click", ".rb-modal-reject", function() {
|
||||
const nw_id = $(this).data("nw-id");
|
||||
const hours = parseInt($(this).data("hours"), 10);
|
||||
|
||||
if (hours > 0) {
|
||||
set_cookie("rb_newwin_" + nw_id, 1, hours, g5_cookie_domain);
|
||||
}
|
||||
closePopupCard(nw_id); // 💡 공통 함수 호출
|
||||
});
|
||||
|
||||
// "닫기" 버튼 클릭 시 (이벤트 위임 사용)
|
||||
$wrapper.on("click", ".rb-modal-close", function() {
|
||||
const nw_id = $(this).data("nw-id");
|
||||
closePopupCard(nw_id); // 💡 공통 함수 호출
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<!-- 팝업레이어 끝 -->
|
||||
<?php endif; ?>
|
||||
@@ -0,0 +1,172 @@
|
||||
/* 모달 팝업 스킨 스타일 */
|
||||
.rb-modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.7); /* 배경을 조금 더 어둡게 */
|
||||
z-index: 9999;
|
||||
padding: 20px;
|
||||
overflow-y: auto; /* 팝업이 많을 경우 스크롤 */
|
||||
}
|
||||
|
||||
/* 💡 [핵심 추가] 팝업 카드들을 정렬하는 그리드 컨테이너 */
|
||||
.rb-modal-grid-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: flex-start; /* 카드를 위쪽으로 정렬 */
|
||||
gap: 10px; /* 카드 사이의 간격 */
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
padding: 20px 0; /* 상하 여백 */
|
||||
}
|
||||
|
||||
/* 💡 [핵심 수정] 개별 팝업 카드 스타일 */
|
||||
.rb-modal-card {
|
||||
/* 이 컨테이너는 JavaScript에서 fadeOut을 위해 사용됩니다. */
|
||||
}
|
||||
|
||||
.rb-modal-content {
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 5px 20px rgba(0,0,0,0.2);
|
||||
max-height: 90vh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* 💡 [수정] width는 PHP에서 인라인 스타일로 적용됩니다. */
|
||||
}
|
||||
|
||||
.rb-modal-close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 15px;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
.rb-modal-close:hover {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.rb-modal-body {
|
||||
padding: 20px;
|
||||
overflow-y: auto; /* 내용이 길면 스크롤 */
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.rb-modal-footer {
|
||||
padding: 10px 15px;
|
||||
background: #f8f9fa;
|
||||
border-top: 1px solid #dee2e6;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-shrink: 0; /* 푸터 높이가 줄어들지 않도록 함 */
|
||||
}
|
||||
|
||||
.rb-modal-footer button {
|
||||
padding: 8px 12px;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
font-size: 13px;
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.rb-modal-footer .rb-modal-reject {
|
||||
background-color: #6c757d;
|
||||
color: #fff;
|
||||
}
|
||||
.rb-modal-footer .rb-modal-reject:hover {
|
||||
background-color: #5a6268;
|
||||
}
|
||||
|
||||
.rb-modal-footer .rb-modal-close {
|
||||
position: static;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
background-color: #555;
|
||||
color: #fff;
|
||||
}
|
||||
.rb-modal-footer .rb-modal-close:hover {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------- */
|
||||
/* 💡 모달 팝업 내부 콘텐츠 스타일 (기존과 동일) */
|
||||
/* -------------------------------------------------- */
|
||||
.rb-modal-body-inner {
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
line-height: 1.7;
|
||||
word-break: break-word;
|
||||
}
|
||||
.rb-modal-body-inner p { margin-bottom: 1em; }
|
||||
.rb-modal-body-inner p:first-child { margin-top: 0; }
|
||||
.rb-modal-body-inner p:last-child { margin-bottom: 0; }
|
||||
.rb-modal-body-inner img { max-width: 100%; height: auto; border-radius: 8px; margin: 10px 0; }
|
||||
.rb-modal-body-inner h1,
|
||||
.rb-modal-body-inner h2,
|
||||
.rb-modal-body-inner h3 { font-family: 'Noto Sans KR', sans-serif; font-weight: 700; color: var(--primary-color, #2c3e50); margin-bottom: 15px; line-height: 1.4; }
|
||||
.rb-modal-body-inner h1 { font-size: 24px; }
|
||||
.rb-modal-body-inner h2 { font-size: 20px; }
|
||||
.rb-modal-body-inner h3 { font-size: 18px; }
|
||||
.rb-modal-body-inner a { color: var(--accent-color, #d35400); text-decoration: underline; }
|
||||
.rb-modal-body-inner a:hover { color: #333; }
|
||||
|
||||
/* -------------------------------------------------- */
|
||||
/* 💡 [최종 수정] 모달 스크롤바 완전 숨김 처리 */
|
||||
/* -------------------------------------------------- */
|
||||
|
||||
/* 1. 기본 상태: 스크롤바를 완전히 투명하게 만듭니다. */
|
||||
.rb-modal-overlay,
|
||||
.rb-modal-body {
|
||||
/* Firefox: 스크롤바 색상을 양쪽 모두 투명하게 설정 */
|
||||
scrollbar-color: transparent transparent;
|
||||
scrollbar-width: thin;
|
||||
transition: scrollbar-color 0.3s ease; /* 부드러운 효과를 위해 추가 */
|
||||
}
|
||||
|
||||
.rb-modal-overlay::-webkit-scrollbar,
|
||||
.rb-modal-body::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.rb-modal-overlay::-webkit-scrollbar-track,
|
||||
.rb-modal-body::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.rb-modal-overlay::-webkit-scrollbar-thumb,
|
||||
.rb-modal-body::-webkit-scrollbar-thumb {
|
||||
/* Webkit: 스크롤바 막대를 투명하게 */
|
||||
background-color: transparent;
|
||||
border-radius: 10px;
|
||||
border: 3px solid transparent;
|
||||
background-clip: padding-box;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
/* 2. :hover 상태: 마우스를 올리면 스크롤바가 나타납니다. */
|
||||
.rb-modal-overlay:hover,
|
||||
.rb-modal-body:hover {
|
||||
/* Firefox: 스크롤바 색상을 보이게 변경 */
|
||||
scrollbar-color: rgba(0, 0, 0, 0.4) transparent;
|
||||
}
|
||||
|
||||
.rb-modal-overlay:hover::-webkit-scrollbar-thumb,
|
||||
.rb-modal-body:hover::-webkit-scrollbar-thumb {
|
||||
/* Webkit: 스크롤바 막대 색상을 보이게 변경 */
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
Reference in New Issue
Block a user