메시지를 화면 중앙에 띄우기 정보
메시지를 화면 중앙에 띄우기
관련링크
http://minyho.kr
96회 연결
본문
조건충족 시 메시지를 화면 중앙에 띄우는 내용입니다.
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 게시판입니다.");}
?>
!-->!-->
추천
4
4
댓글 10개
오... 페이지마다 내용을 다르게 띄울 수 있는거네요!

@coDribble 감사 합니다.
글자수에 반응하도록 되어 있으니 적적히
사용 할 수 있을 것 입니다.

감사합니다.

@라리고
감사 합니다.
글자수에 반응하도록 되어 있으니 적적히
사용 할 수 있을 것 입니다.
3초를 자신의 취향에 맞게 수정하세요.
감사합니다.
바로 가져다 써도 손댈게 없어보입니다.

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

공개해주셔서 감사합니다!
예전 기억에 IP & ***님 **째 방문입니다도 ㅎㅎ; 유행했던~~

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

감사합니다

@너나잘해 감사 합니다.