리스트 모달게시판 정보
게시판 리스트 모달게시판
관련링크
첨부파일
테스트한 버전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
17
댓글 전체
멋지 네요 안네 게시물은 더멋짐
요즘 동영상 꾸미기에 맛들려서 냑에 좀 소홀합니다.ㅋ
모달창안에 또 모달창이 생길 수 있어 그걸 방지하는 코드로 업뎃했어요.
새로 다운로드 받아 가세요^^
새로 다운로드 받아 가세요^^
감사 합니다. 정말 뚝딱 망치가 따로 없네요. ^.-
실은 어제 질문 게시글 올라온 걸 보고 순식간에 코드는 떠올랐는데...
php8.1 버전에 게시판을 깔면서 레이아웃을 스타일링 한다고 한참 시간이 걸렸네요.ㅋ
저는 이런 레이아웃을 참 좋아합니다.
모바일은 레이아웃을 만들려다 귀찮고 성가셔서 그냥 통과했습니다.ㅋ
php8.1 버전에 게시판을 깔면서 레이아웃을 스타일링 한다고 한참 시간이 걸렸네요.ㅋ
저는 이런 레이아웃을 참 좋아합니다.
모바일은 레이아웃을 만들려다 귀찮고 성가셔서 그냥 통과했습니다.ㅋ
모달창안에 또 모달창이 생길 수 있어 그걸 방지하는 코드로 업뎃했어요.
새로 다운로드 받아 가세요^^
새로 다운로드 받아 가세요^^
업데이트 감사 합니다.
깔끔하니 좋네요.
추천 합니다.
추천 합니다.
스킨을 제가 너무 안 풀어서요. 상위버전은 스킨이 근본적인 곳은 동일하나 부분적인 것에서 약간 바뀐 듯 합니다.
모달창안에 또 모달창이 생길 수 있어 그걸 방지하는 코드로 업뎃했어요.
새로 다운로드 받아 가세요^^
새로 다운로드 받아 가세요^^
멋집니다. 다양하게 응용할 수있을것 같습니다. 감사합니다.
전에 웹호스팅 저렴하게 하나 하셨다고 하셨는데 phps.kr인가요?
들어가보니 php8.1도 지원한다고 나오네요.
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');
?>
로 주면 다시 살아나구요. 그래서 원하는 느낌이 딱 나오면 정말로 희열을 느낍니다.ㅋ
일단 상하단 파일이 _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
띵가 띵가~~~ 오랜만에 반가운 음악 듣고 갑니다. ^^
Cyndi Lauper - Girls Just Wanna Have Fun
띵가 띵가~~~ 오랜만에 반가운 음악 듣고 갑니다. ^^
감사합니다
찾던 모달입니다^^
감사합니다
감사합니다!! 복 받으세요 ㅎㅎ 찾던 스킨이네요
혹시 상업적으로 사용해도되는건가요?
예 사용하세요
감사합니다!!
