mbg1346 - 잠시 보고 사라지게 만드는 javascript

홈피 작업을 하다 보면 어떤 기능들은 페이지 출력시 간혹 필요는 한데,

보통때는 필요가 없어서 자리만 차지하고 있는 것들이 있죠.

이런 것들을 모아서 지정 시간이 지나면 화면에서 사리지게 만드는 javascript.

(참고로 sketchbook5_MH 게시판 스킨을 예로 듭니다.)

/modules/board/skins/sketchbook5_MH/js/board.js 에 추가

// 5초 후 모든 .mh_disappear 패널 제거
setTimeout(function() {
    var panels = document.querySelectorAll('.mh_disappear');
    
    panels.forEach(function(panel, index) {
        setTimeout(function() {
            panel.style.transition = 'opacity 0.5s';
            panel.style.opacity = '0';
            
            setTimeout(function() {
                panel.remove();
            }, 500);
        }, index * 500); // 0.5초씩 지연
    });
}, 5000);

5초후 사라지게 만들고 싶은 기능의 class에 mh_disappear 적용

• list.html 37줄 mh_disappear추가

<!--// 관리자에게 모듈번호 출력 -->
<div cond="$grant->manager && $mi->modul_num=='' && !$mo" class="m_num mh_disappear" onclick="copyToClipboard('{$mi->module_srl}')">{$mi->module_srl}</div>
<script cond="$grant->manager && $mi->modul_num==''">
    function copyToClipboard(text) {
        navigator.clipboard.writeText(text).then(function() {
            alert('모듈 번호가 클립보드에 복사되었습니다: ' + text);
        }, function(err) {
            console.error('클립보드 복사 실패:', err);
        });
    }
</script>

• ver.html 19줄 mh_disappear추가

<div cond="$grant->manager && !$mi->ver_info==''" class="last_version mh_disappear">
     <span>SK5_MH 버전 정보</span>
    <span><i class="fa-regular fa-bell"></i>&nbsp;&nbsp; <a href="https://moonhouse.co.kr/xemy/590994" target="_blank">{$current_version}</a> &nbsp;&nbsp;<i class="fa-solid fa-caret-right"></i>&nbsp;&nbsp; <a href="https://github.com/moonhouse-80san/SketchBook5_MH" target="_blank">{$last_version}</a></span>
    <a href="https://moonhouse.co.kr/xemy/590994" target="_blank">MH</a>
    &nbsp;&nbsp;|&nbsp;&nbsp;
    <a href="https://github.com/moonhouse-80san/SketchBook5_MH" target="_blank">Github
    &nbsp;&nbsp;&nbsp;&nbsp;
    <a class="closeupt"  title="기본-table"><i class="fa-solid fa-xmark"></i> 7 Day</a>
</div>

Atachment
첨부

List of Articles
번호	분류	제목	조회 수	평점
75	css	굵은 폰트만 따로 글꼴 지정하는 방법	44
»	JavaScript	잠시 보고 사라지게 만드는 javascript	39
73	css	하단 영역을 브라우즈의 최하단에 고정시키는 방법	33
72	css	테두리(border) 상자에 화살표 모양 css로 출력하기	986
71	html	접기, 펼치기 folding기능 - <details> 와 <summary>로 간단하게 구현하기 6	33,298	5.0점
70	css	스크롤 바(Scrollbar) 스타일링	728
69		DIV 영역 자체에 링크 거는 방법 4	32,634	5.0점
68	JavaScript	현재 시간 실시간으로 카운트 출력	1,306
67	css	line-height 와 height의 차이점	1,858
66	css	css 사이즈 태그 em, rem, vh, vw, vmin, vmax 정리 1	3,022

65	html	flex로 세로 가로 정렬 하기 1	1,399
64	JavaScript	버튼 클릭시 클립보드에 복사하는 방법	3,228
63	css	Hover시 테두리두께 설정	3,818
62	css	CSS 색상 이름 rgb , 16진수 자료( css 색상표 )	2,013
61	css	display 속성: inline, block, inline-block	1,527
60	css	글 색상을 랜덤으로 출력하기	1,633
59	css	div 영역에 Width:100%; height:100%; 적용해 보기 - display:table	2,575
58	JavaScript	홈페이지에 화려한 에니메이션 효과를 주기 - aos animate	3,528
57	css	웹퍼블리셔가 알고있어야 할 display:table 속성 4	1,410
56		HTML Table이 디바이스 및 화면 가로사이즈보다 더 넓을 때	2,501

번호

분류

제목

조회 수

평점

css

굵은 폰트만 따로 글꼴 지정하는 방법 file