SiheonLee

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

· 2024-10-13 (일) 02:21:03 · 3421 · 7

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

 

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

2024-10-13 (일) 11:42:59

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

감사 합니다.

감사합니다.

2024-10-14 (월) 01:02:11

감사합니다~!!

2024-10-14 (월) 08:58:13

감사 합니다.

감사합니다

좋아요 

댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 팁자료실

2,788건
+
제목 글쓴이 날짜 조회
24-10-22 조회 4,045
24-10-21 조회 3,742
24-10-20 조회 4,082
24-10-17 조회 4,487
24-10-15 조회 3,360
24-10-14 조회 3,444
24-10-14 조회 3,039
24-10-13 조회 3,422
24-10-11 조회 3,652
24-10-09 조회 3,624
24-10-08 조회 3,607
24-10-07 조회 3,900
24-10-07 조회 3,320
24-10-07 조회 3,959
24-10-07 조회 6,121
24-10-02 조회 4,085
24-10-01 조회 3,410
24-10-01 조회 3,657
24-09-30 조회 3,877
24-09-28 조회 3,584
24-09-26 조회 3,707
24-09-25 조회 3,645
24-09-24 조회 3,041
24-09-21 조회 3,535
24-09-19 조회 4,263
24-09-09 조회 3,519
24-09-04 조회 3,416
24-09-04 조회 3,825
24-08-31 조회 3,720
24-08-31 조회 3,639