게시판 리스트에서 회원가입 유도 정보
게시판 리스트에서 회원가입 유도본문
비회원이 게시판 리스트에 접근할 경우 로그인 해야 글쓰기가 가능하다고 위에 빨간색으로 강조하는 코드입니다. 많이 부족하지만 도움이 됐으면 좋겠네요~ 아래 코드를 추가하고 싶으신 위치에 그대로 추가하시면 됩니다.
<?php if (!isset($is_member) || !$is_member) { ?>
<?php if (!isset($_COOKIE['hide_notice_banner']) || $_COOKIE['hide_notice_banner'] != '1') { ?>
<div id="notice-banner" style="background-color: #ff6666; color: white; padding: 15px 20px; border-radius: 15px; text-align: center; margin: 20px auto; position: relative; max-width: 100%;">
잠시만요! 로그인 후 글쓰기를 하실 수 있습니다!
<button id="close-banner" style="position: absolute; top: 10px; right: 10px; background: transparent; border: none; color: white; font-size: 16px; cursor: pointer;">×</button>
</div>
<script>
document.getElementById('close-banner').addEventListener('click', function() {
document.getElementById('notice-banner').style.display = 'none';
// 쿠키 설정: 24시간 후에 만료
var date = new Date();
date.setTime(date.getTime() + (24 * 60 * 60 * 1000)); // 24시간
var expires = "; expires=" + date.toUTCString();
document.cookie = "hide_notice_banner=1" + expires + "; path=/";
});
</script>
<style>
/* 반응형 스타일 */
#notice-banner {
max-width: 100%;
box-sizing: border-box;
font-size: 16px;
}
#notice-banner button {
font-size: 20px;
}
@media (max-width: 768px) {
#notice-banner {
font-size: 14px;
padding: 10px 15px;
max-width: 95%; /* 태블릿 크기에서 배너의 최대 너비를 95%로 조정 */
}
#notice-banner button {
font-size: 18px;
top: 5px;
right: 5px;
}
}
@media (max-width: 480px) {
#notice-banner {
font-size: 12px;
padding: 8px 10px;
max-width: 90%; /* 모바일 크기에서 배너의 최대 너비를 90%로 조정 */
}
#notice-banner button {
font-size: 16px;
}
}
</style>
<?php } ?>
<?php } ?>
4
댓글 6개
좋은 팁입니다. 감사합니다 ^^
감사 합니다.
감사합니다.
감사합니다~!!
감사 합니다.
감사합니다