메시지를 화면 중앙에 띄우기 > 그누보드5 팁자료실

그누보드5 팁자료실

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

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

본문

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

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

 

message.php


<?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">×</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>

tail.sub.php


<?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 게시판입니다.");}
?>

33282748_1721276823.3321.png

33282748_1721276810.4749.png

 

추천
4

댓글 10개

@라리고 

감사 합니다.

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

사용 할 수 있을 것 입니다.

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

전체 2,679 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1402호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT