메시지를 화면 중앙에 띄우기
조건충족 시 메시지를 화면 중앙에 띄우는 내용입니다.
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">×</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]


댓글 10개
오... 페이지마다 내용을 다르게 띄울 수 있는거네요!
@coDribble 감사 합니다.
글자수에 반응하도록 되어 있으니 적적히
사용 할 수 있을 것 입니다.
감사합니다.
@라리고
감사 합니다.
글자수에 반응하도록 되어 있으니 적적히
사용 할 수 있을 것 입니다.
3초를 자신의 취향에 맞게 수정하세요.
감사합니다.
바로 가져다 써도 손댈게 없어보입니다.
@타버린나무 감사 합니다.
공개해주셔서 감사합니다!
예전 기억에 IP & ***님 **째 방문입니다도 ㅎㅎ; 유행했던~~
@아이스웨덴™ 감사 합니다.
감사합니다
@너나잘해 감사 합니다.
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4429 | ||
| 2664 |
선택과집중
|
4개월 전 | 575 | |
| 2663 |
|
4개월 전 | 626 | |
| 2662 |
|
4개월 전 | 582 | |
| 2661 |
선택과집중
|
4개월 전 | 512 | |
| 2660 | 4개월 전 | 588 | ||
| 2659 |
Modify
|
4개월 전 | 654 | |
| 2658 |
선택과집중
|
4개월 전 | 416 | |
| 2657 | 4개월 전 | 452 | ||
| 2656 |
|
5개월 전 | 965 | |
| 2655 |
선택과집중
|
5개월 전 | 549 | |
| 2654 | 5개월 전 | 405 | ||
| 2653 |
선택과집중
|
5개월 전 | 591 | |
| 2652 | 5개월 전 | 399 | ||
| 2651 | 5개월 전 | 447 | ||
| 2650 |
선택과집중
|
5개월 전 | 328 | |
| 2649 |
선택과집중
|
5개월 전 | 426 | |
| 2648 | 5개월 전 | 442 | ||
| 2647 |
welcome
|
5개월 전 | 545 | |
| 2646 |
디지털홍익인간
|
5개월 전 | 453 | |
| 2645 | 5개월 전 | 469 | ||
| 2644 |
선택과집중
|
5개월 전 | 515 | |
| 2643 | 5개월 전 | 461 | ||
| 2642 | 5개월 전 | 372 | ||
| 2641 | 5개월 전 | 361 | ||
| 2640 | 5개월 전 | 394 | ||
| 2639 | 5개월 전 | 1364 | ||
| 2638 |
|
5개월 전 | 517 | |
| 2637 |
세르반데스
|
5개월 전 | 402 | |
| 2636 |
선택과집중
|
6개월 전 | 572 | |
| 2635 |
선택과집중
|
6개월 전 | 687 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기