리스트 모달게시판

modal.jpg

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
호환 가능 버전 아마도 전부. 최신버전이면 굿

첨부파일

modal.jpg (163.5 KB)
0회 2023-01-25 14:13
list.skin.zip (4.1 KB) 73회 2023-01-25 14:21
list_skin_update.zip (4.2 KB) 57회 2023-01-27 01:55
|

댓글 42개

멋지 네요 안네 게시물은 더멋짐
요즘 동영상 꾸미기에 맛들려서 냑에 좀 소홀합니다.ㅋ
모달창안에 또 모달창이 생길 수 있어 그걸 방지하는 코드로 업뎃했어요.
새로 다운로드 받아 가세요^^
감사 합니다. 정말 뚝딱 망치가 따로 없네요. ^.-
실은 어제 질문 게시글 올라온 걸 보고 순식간에 코드는 떠올랐는데...
php8.1 버전에 게시판을 깔면서 레이아웃을 스타일링 한다고 한참 시간이 걸렸네요.ㅋ
저는 이런 레이아웃을 참 좋아합니다.
모바일은 레이아웃을 만들려다 귀찮고 성가셔서 그냥 통과했습니다.ㅋ
모달창안에 또 모달창이 생길 수 있어 그걸 방지하는 코드로 업뎃했어요.
새로 다운로드 받아 가세요^^
업데이트 감사 합니다.
깔끔하니 좋네요.
추천 합니다.
스킨을 제가 너무 안 풀어서요. 상위버전은 스킨이 근본적인 곳은 동일하나 부분적인 것에서 약간 바뀐 듯 합니다.
모달창안에 또 모달창이 생길 수 있어 그걸 방지하는 코드로 업뎃했어요.
새로 다운로드 받아 가세요^^
멋집니다. 다양하게 응용할 수있을것 같습니다. 감사합니다.
전에 웹호스팅 저렴하게 하나 하셨다고 하셨는데 phps.kr인가요?
들어가보니 php8.1도 지원한다고 나오네요.
php8.1의 좋은 점이 있는지 궁금합니다.
다른건 다 차치하고 상위버전은 하위버전보다 무조건 빠릅니다. 물론 눈으로 느낄 수 있느냐 아니냐는 두번째 문제이구요.
모달창안에 또 모달창이 생길 수 있어 그걸 방지하는 코드로 업뎃했어요.
새로 다운로드 받아 가세요^^
멋지네요...^^
멋지다니 다행입니다.
저는 레이아웃이 고전적인 블로그나 카페 스타일을 좋아하거든요. 로그인창도 좌측에 두는 걸 좋아하구요.
어제 시간이 걸린 이유는 여기에 분류를 주면 분류 카테고리가 자동으로 좌측 로그인 창 아래에 메뉴로 자리하게 하려고 해서 그렇습니다.ㅋ
모달창안에 또 모달창이 생길 수 있어 그걸 방지하는 코드로 업뎃했어요.
새로 다운로드 받아 가세요^^
너무 멋진 팁입니다!! 유용하게 쓰겠습니다. ㅎㅎ 감사합니다.
사실 모바일에서 모달창은 좀 그래요. pc만으로 충분할 듯 합니다.
모달창안에 또 모달창이 생길 수 있어 그걸 방지하는 코드로 업뎃했어요.
새로 다운로드 받아 가세요^^
모달만 아니라 CSS 까지 정말 대단하십니다. 공부하는데 큰 도움이 되네요 감사합니다.
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');
?>

로 주면 다시 살아나구요. 그래서 원하는 느낌이 딱 나오면 정말로 희열을 느낍니다.ㅋ
많은 정보 감사드립니다.
하나하나가 시간이 있어야 하는데 시간을 절약하는데 큰 도움이 됩니다.
댓글 감사합니다.
모달창안에 또 모달창이 생길 수 있어 그걸 방지하는 코드로 업뎃했어요.
새로 다운로드 받아 가세요^^
유용한 정보를 공유해 주셔서 감사합니다.
늘 감사합니다.
모달창안에 또 모달창이 생길 수 있어 그걸 방지하는 코드로 업뎃했어요.
새로 다운로드 받아 가세요^^
동영상 게시판으로 좋습니다^^
에고 지금 보니 모달창 안에 또 모달창이 생길 수 있네요.
코드 수정해야겠습니다.
모달창안에 또 모달창이 생길 수 있어 그걸 방지하는 코드로 업뎃했어요.
새로 다운로드 받아 가세요^^
좋은 소스 공개해 주셔서 감사합니다.
감사합니다
감사합니다
오 공부자료 감솨
감사합니다
멋집니다.

Cyndi Lauper - Girls Just Wanna Have Fun
띵가 띵가~~~ 오랜만에 반가운 음악 듣고 갑니다. ^^
감사합니다
찾던 모달입니다^^
감사합니다

감사합니다!! 복 받으세요 ㅎㅎ 찾던 스킨이네요
혹시 상업적으로 사용해도되는건가요?

예 사용하세요

댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 스킨

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

+