리스트 모달게시판
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 파일입니다.
[code]
<!-- 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 -->
[/code]
[code]
<!-- wittazzurri -->
<span class="modal-span" onclick="modalMode('<?php echo $list[$i]['href'] ?>')">[ MODAL ]</span>
<!-- /wittazzurri -->
[/code]
--------------------
--------------------
첨가코드 하나 55826 버전 기준 15~29 라인
[code]
<!-- 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 -->
[/code]
첨가코드 둘 55826 버전 기준 144~146 라인
[code]
<!-- wittazzurri -->
<span style="color:#c00000;cursor:pointer;margin-right:5px" onclick="modalMode('<?php echo $list[$i]['href'] ?>')">[ MODAL ]</span>
<!-- /wittazzurri -->
[/code]
버전 정보
테스트한 버전
5.5.8.2.6
호환 가능 버전
아마도 전부. 최신버전이면 굿
첨부파일
|
댓글을 작성하시려면 로그인이 필요합니다.
그누보드5 스킨
좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.
접속자
실시간 현재 접속자 스킨 BASIC (SSE 적용) v1.0.0 VERSION ONE STABLE v1.0.1 비회원 프로필 이미지와 순번 출력은 FE에서 처리...
게시판
new_ver2017 그누보드5 (구버전과 기능및 구조 많이 다름) 기본기능 1. 유트브 영상 전체곡듣기 2. 유트브 한곡듣기 3. 유트브 선택곡듣기 업데이트 ...
게시판
안녕하세요. ^^ 정적인손님 입니다. 오늘 오전 3시쯤부터 냑 섭다가 있었네요. ^^;; 리자님 고생하셧을거같습니다. 자그마니 화이팅합니다. 암튼 이전 업뎃하던 구글지도를 써볼려고...
게시판
게시판 FAQ스킨입니다. 가끔 필요할때가 있어서 업로드합니다. 스킨폴더 그대로 옮기시고관리자에서 설정하셔서 사용하시면됩니다. https://human1040.iwinv.ne...
게시판
비메오(vimeo) 플레이어 게시판 입니다. 비메오 링크 그대로 wr_link1의 위치에 올리시면 됩니다. list.skin.php [code] <iframe s...
게시판
첨부파일로 업로드한 이미지에 필터효과를 적용해보았습니다. 포토샾에서 많이 사용하는 hue/saturate, grayscale, invert등의 효과를 라디오 버튼으로 선택하면 이미...
레이아웃
나리야 기본테마의 타이틀위젯에 캡션적용했습니다. 업로드 경로 : /theme/BS4-Basic/widget/data-carousel
댓글 42개
새로 다운로드 받아 가세요^^
php8.1 버전에 게시판을 깔면서 레이아웃을 스타일링 한다고 한참 시간이 걸렸네요.ㅋ
저는 이런 레이아웃을 참 좋아합니다.
모바일은 레이아웃을 만들려다 귀찮고 성가셔서 그냥 통과했습니다.ㅋ
새로 다운로드 받아 가세요^^
추천 합니다.
새로 다운로드 받아 가세요^^
전에 웹호스팅 저렴하게 하나 하셨다고 하셨는데 phps.kr인가요?
들어가보니 php8.1도 지원한다고 나오네요.
php8.1의 좋은 점이 있는지 궁금합니다.
새로 다운로드 받아 가세요^^
저는 레이아웃이 고전적인 블로그나 카페 스타일을 좋아하거든요. 로그인창도 좌측에 두는 걸 좋아하구요.
어제 시간이 걸린 이유는 여기에 분류를 주면 분류 카테고리가 자동으로 좌측 로그인 창 아래에 메뉴로 자리하게 하려고 해서 그렇습니다.ㅋ
새로 다운로드 받아 가세요^^
새로 다운로드 받아 가세요^^
일단 상하단 파일이 _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');
?>
로 주면 다시 살아나구요. 그래서 원하는 느낌이 딱 나오면 정말로 희열을 느낍니다.ㅋ
하나하나가 시간이 있어야 하는데 시간을 절약하는데 큰 도움이 됩니다.
댓글 감사합니다.
새로 다운로드 받아 가세요^^
새로 다운로드 받아 가세요^^
코드 수정해야겠습니다.
새로 다운로드 받아 가세요^^
Cyndi Lauper - Girls Just Wanna Have Fun
띵가 띵가~~~ 오랜만에 반가운 음악 듣고 갑니다. ^^
감사합니다!! 복 받으세요 ㅎㅎ 찾던 스킨이네요
혹시 상업적으로 사용해도되는건가요?
예 사용하세요
감사합니다!!