리스트 모달게시판 > 그누보드5 스킨

그누보드5 스킨

좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.

리스트 모달게시판 정보

게시판 리스트 모달게시판

첨부파일

list.skin.zip (4.1K) 48회 다운로드 2023-01-25 14:21:32
list_skin_update.zip (4.2K) 45회 다운로드 2023-01-27 01:55:51
테스트한 버전5.5.8.2.6
호환 가능 버전아마도 전부. 최신버전이면 굿

본문

https://sir.kr/qa/487580 - 질문글 보고 하나 만들었습니다.

 

1. 오직 pc용입니다. 첨가코드는 두가지로 간단하니 모바일용은 금방 만들 수 있을 것입니다.

2. 그러나 모바일에서 모달창은 큰 의미가 없으니 기본 모바일 스킨으로 사용해도 무리가 없을 것입니다.

3. 첨부파일 압축 플고 list.skin.php 만 pc 의 스킨 디렉토리에서 바꿔주세요.

4. 빨간색 [ MODAL ] 을 클릭하면 모달창으로 열립니다.

5. 모달창 바깥의 검은 영역이나 CLOSE 를 클릭하면 원위치합니다.

6. 게시글 스킨 스타일링 한 것은 포함되지 않습니다. 그냥 basic 스킨이라 생각하고 다운로드 받으세요.

7. 테마나 빌더는 아예 설치를 해 본적이 없어서 잘 모릅니다. 본인이 각개격파하세요.

 

--------------------

--------------------

 

2023년 01월 27일 02 시에 업뎃합니다. 모달창 안에 또 모달창이 가능하네요.

그걸 방지하는 코드를 넣었습니다. list_skin_update 파일입니다.

 


<!-- wittazzurri -->
<style>
#modalDiv { display:none; position:fixed; top:0px;left:0px; z-index:100; width:100%; height:100%; background-color:#000000; padding:50px; cursor:pointer; }
#modalDiv div { height:100%; padding:5px; border:2px solid #444444; border-radius:15px;}
#modalDiv iframe { display:block; width:100%; height:100%; border:none; border-radius:10px; }
#modalDiv span { position:absolute; top:80px; left:80px; color:#000000; font-size:20px; font-weight:bold; }
.modal-span { color:#c00000; cursor:pointer; margin-right:5px; }
</style>
<div id="modalDiv" onclick="style.display='none';innerHTML=''"></div>
<script>
parentModal = 1;
function modalMode(modal) {
    parentModal = 0;
    modalDiv.style.display = "block";
    modalDiv.innerHTML = "<div><iframe src=" + modal + "></iframe><span>CLOSE</span></div>";
}
if (!parent.parentModal) {
    document.addEventListener("DOMContentLoaded", () => {
        for (modal_span of document.querySelectorAll(".modal-span")) modal_span.style.display = "none";
    } );
}
</script>
<!-- /wittazzurri -->

 


<!-- wittazzurri -->
<span class="modal-span" onclick="modalMode('<?php echo $list[$i]['href'] ?>')">[ MODAL ]</span>
<!-- /wittazzurri -->

 

--------------------

--------------------

 

첨가코드 하나 55826 버전 기준 15~29 라인


<!-- wittazzurri -->
<style>
#modalDiv { display:none; position:fixed; top:0px;left:0px; z-index:100; width:100%; height:100%; background-color:#000000; padding:50px; cursor:pointer; }
#modalDiv div { height:100%; padding:5px; border:2px solid #444444; border-radius:15px;}
#modalDiv iframe { display:block; width:100%; height:100%; border:none; border-radius:10px; }
#modalDiv span { position:absolute; top:80px; left:80px; color:#000000; font-size:20px; font-weight:bold; }
</style>
<div id="modalDiv" onclick="style.display='none';innerHTML=''"></div>
<script>
function modalMode(modal) {
    modalDiv.style.display = "block";
    modalDiv.innerHTML = "<div><iframe src=" + modal + "></iframe><span>CLOSE</span></div>";
}
</script>
<!-- /wittazzurri -->

 

첨가코드 둘 55826 버전 기준 144~146 라인


<!-- wittazzurri -->
<span style="color:#c00000;cursor:pointer;margin-right:5px" onclick="modalMode('<?php echo $list[$i]['href'] ?>')">[ MODAL ]</span>
<!-- /wittazzurri -->
추천
17

댓글 전체

실은 어제 질문 게시글 올라온 걸 보고 순식간에 코드는 떠올랐는데...
php8.1 버전에 게시판을 깔면서 레이아웃을 스타일링 한다고 한참 시간이 걸렸네요.ㅋ
저는 이런 레이아웃을 참 좋아합니다.
모바일은 레이아웃을 만들려다 귀찮고 성가셔서 그냥 통과했습니다.ㅋ
멋집니다. 다양하게 응용할 수있을것 같습니다. 감사합니다.
전에 웹호스팅 저렴하게 하나 하셨다고 하셨는데 phps.kr인가요?
들어가보니 php8.1도 지원한다고 나오네요.
php8.1의 좋은 점이 있는지 궁금합니다.
다른건 다 차치하고 상위버전은 하위버전보다 무조건 빠릅니다. 물론 눈으로 느낄 수 있느냐 아니냐는 두번째 문제이구요.
멋지다니 다행입니다.
저는 레이아웃이 고전적인 블로그나 카페 스타일을 좋아하거든요. 로그인창도 좌측에 두는 걸 좋아하구요.
어제 시간이 걸린 이유는 여기에 분류를 주면 분류 카테고리가 자동으로 좌측 로그인 창 아래에 메뉴로 자리하게 하려고 해서 그렇습니다.ㅋ
css 는...
일단 상하단 파일이 _head.php, _tail.php 로 인클루드 하는 걸
_head.sub.php, _tail.sub.php 로 게시판 설정에서 고치면 상하단과 로그인창이 모두 없어지고 알몸의 맨몸뚱아리 게시판만 남거든요. 그 상태에서

https://blog.kakaocdn.net/dn/UpK0n/btrW4F5GG6n/cp17kCnCUnoT6AEtgiGCK0/img.jpg

이 이미지 한장만 body 의 백그라운드로 상중앙 no repeat 를 주는 거지요.
그 이후는 각 블럭들을 padding 과 margin 으로 처절하게 픽셀격파를 하는 것이구요.
없어진 로그인창은

<?php
include_once(G5_LIB_PATH.'/outlogin.lib.php');
echo outlogin('basic');
?>

로 주면 다시 살아나구요. 그래서 원하는 느낌이 딱 나오면 정말로 희열을 느낍니다.ㅋ
전체 2,423 |RSS
그누보드5 스킨 내용 검색

회원로그인

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