2026, 새로운 도약을 시작합니다.

메시지를 화면 중앙에 띄우기

조건충족 시 메시지를 화면 중앙에 띄우는 내용입니다.

3초 후 자동 닫기, 그동안 아무곡이나 클릭 시 닫음.

message.php

[code]

<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가;

$msg = '1';
function modal_call($condition, $message) {
    if ($condition) {
        echo "<script type='text/javascript'>window.onload = function() { showModal('$message'); };</script>";
    }
}
?>
<style>
.modal {display: none;position: fixed;z-index: 1;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgba(0, 0, 0, 0.01);}
.modal-content {position: absolute;color: #fff;text-shadow: 0px 0px 0 #000, 1px 0px 0 #000, 0px 1px 0 #000, 1px 1px 0 #000;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: rgba(0, 0, 255, .6);padding: 20px;padding-right: 40px;font-size: 14px;border: 2px solid #b80;max-width: 80%;max-height: 80%;text-align: center;overflow-wrap: break-word;word-break: break-word;}
.close {position: absolute;color: #aaa;right: 10px;top: 10px;font-size: 28px;font-weight: bold;}
.close:hover, .close:focus {color: black;text-decoration: none;cursor: pointer;}
</style>
<div id="myModal" class="modal"><div class="modal-content"><p><span id="modalMessage"></span> <span class="close">&times;</span></p></div></div>
<script>
    // 모달을 보여주는 함수
    function showModal(message) {
        const modal = document.getElementById("myModal");
        const modalMessage = document.getElementById("modalMessage");
        modalMessage.innerText = message;

        // 모달 박스의 크기를 동적으로 조절
        const modalContent = document.querySelector(".modal-content");
        modalContent.style.width = 'auto';
        modalContent.style.height = 'auto';

        // 모달을 보여줍니다.
        modal.style.display = "block";

        // 일정 시간 후에 모달을 닫습니다.
        setTimeout(hideModal, 3000); // 3초 후에 모달 닫기
    }

    // 모달을 숨기는 함수
    function hideModal() {
        const modal = document.getElementById("myModal");
        modal.style.display = "none";
    }

    // 모달 닫기 버튼 설정
    document.querySelector(".close").onclick = function() {
        hideModal();
    };

    // 모달 바깥을 클릭했을 때 모달을 숨기는 설정
    window.onclick = function(event) {
        const modal = document.getElementById("myModal");
        if (event.target == modal) {
            hideModal();
        }
    };
</script>

[/code]

tail.sub.php

[code]

<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_THEME_PATH.'/lib/message.php');
if (defined('_INDEX_')){ modal_call(defined('_INDEX_'), "민들레 홈페이지에 들어 오셨습니다.");} else {if ($bo_table) modal_call($bo_table, "$bo_table 게시판입니다.");}
?>

[/code]

33282748_1721276823.3321.png

33282748_1721276810.4749.png

|

댓글 10개

오... 페이지마다 내용을 다르게 띄울 수 있는거네요!

@coDribble 감사 합니다.

글자수에 반응하도록 되어 있으니 적적히

사용 할 수 있을 것 입니다.

@라리고

감사 합니다.

글자수에 반응하도록 되어 있으니 적적히

사용 할 수 있을 것 입니다.

3초를 자신의 취향에 맞게 수정하세요.

감사합니다.

바로 가져다 써도 손댈게 없어보입니다.

@타버린나무 감사 합니다.

공개해주셔서 감사합니다!

예전 기억에 IP & ***님 **째 방문입니다도 ㅎㅎ; 유행했던~~

@아이스웨덴™ 감사 합니다.

@너나잘해 감사 합니다.

댓글 작성

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

로그인하기

그누보드5 팁자료실

번호 제목 글쓴이 날짜 조회
공지 3년 전 조회 4,597
2741 3일 전 조회 99
2740 4일 전 조회 96
2739 1주 전 조회 206
2738 1주 전 조회 209
2737 1주 전 조회 174
2736 1주 전 조회 276
2735 3주 전 조회 278
2734 3주 전 조회 259
2733 1개월 전 조회 262
2732 1개월 전 조회 300
2731 1개월 전 조회 264
2730 1개월 전 조회 222
2729 1개월 전 조회 350
2728 1개월 전 조회 244
2727 1개월 전 조회 419
2726 1개월 전 조회 253
2725 1개월 전 조회 326
2724 1개월 전 조회 357
2723 1개월 전 조회 265
2722 1개월 전 조회 298
2721 1개월 전 조회 211
2720 2개월 전 조회 304
2719 2개월 전 조회 307
2718 2개월 전 조회 200
2717 2개월 전 조회 335
2716 2개월 전 조회 202
2715 2개월 전 조회 311
2714 2개월 전 조회 271
2713 2개월 전 조회 374
2712 2개월 전 조회 289
🐛 버그신고