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

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

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]