SiheonLee

게시판 리스트에서 회원가입 유도

비회원이 게시판 리스트에 접근할 경우 로그인 해야 글쓰기가 가능하다고 위에 빨간색으로 강조하는 코드입니다. 많이 부족하지만 도움이 됐으면 좋겠네요~ 아래 코드를 추가하고 싶으신 위치에 그대로 추가하시면 됩니다.

 

    <?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 } ?>

 

 

 

1888718440_1728753831.0495.png

1888718440_1728753586.2682.png

|

댓글 7개

좋은 팁입니다. 감사합니다 ^^

감사 합니다.

감사합니다~!!

감사 합니다.

감사합니다

댓글을 작성하시려면 로그인이 필요합니다.
+
제목 글쓴이 날짜 조회
24-10-28 조회 4,841
24-10-24 조회 5,098
24-10-22 조회 5,155
24-10-21 조회 4,814
24-10-20 조회 5,277
24-10-17 조회 5,518
24-10-15 조회 4,334
24-10-14 조회 4,396
24-10-14 조회 4,046
24-10-13 조회 4,420
24-10-11 조회 4,622
24-10-09 조회 4,639
24-10-08 조회 4,587
24-10-07 조회 4,920
24-10-07 조회 4,287
24-10-07 조회 4,933
24-10-07 조회 7,146
24-10-02 조회 5,153
24-10-01 조회 4,431
24-10-01 조회 4,662
24-09-30 조회 4,917
24-09-28 조회 4,654
24-09-26 조회 4,713
24-09-25 조회 4,632
24-09-24 조회 4,044
24-09-21 조회 4,544
24-09-19 조회 5,265
24-09-09 조회 4,542
24-09-04 조회 4,387
24-09-04 조회 4,853