초기화면의 최신 글의 내용만을 모달창으로 하려면...

초기화면의 최신 글의 내용만을 모달창으로 하려면...

QA

초기화면의 최신 글의 내용만을 모달창으로 하려면...

본문

안녕하세요? 
설 연휴 잘 보내시고 고향 길 편히 다녀 오십시오~^^)

 

target="_blank"를 하면 클릭 시 새로운 탭으로 열리는데... 
초기화면의 최신 글에서 게시물을 클릭하면 다른 것은 안 나타내고 내용만 모달창으로 띄우려면 어떻게 하는 것이 좋은지요?

 

감사합니다.

이 질문에 댓글 쓰기 :

답변 2


// index.php 하단삽입
<div id="popup"></div>
<div id="bg"></div>
<style>
#popup { position: absolute; z-index: 999; display: none; width: 800px; height: 500px; overflow: auto; background-color: #fff}
#bg { position: absolute;  z-index: 900; top: 0; left: 0; display: none; width:100%; background-color: #000}
</style>
<script>
var $popup = $("#popup"), $bg = $("#bg");
$(".lat li").on("click", function(e) {   
    e.preventDefault();
    var i = $(this).index();
    var bo_table = $(this).find("a").attr("href").replace(/.+bo_table=([^&]+).+/, '$1'); 
    var html = $("." + bo_table).eq(i).html(); 
    $bg.show().css('height', $(document).height());
    $popup.show().html(html).css({'top' : $(window).height()/2 - $popup.height()/2, 'left' : $(window).width()/2 - $popup.width()/2 });
});
$popup.on("click", function() {
    $(this).hide();
    $bg.hide();
});
</script>
 
// latest.skin.php 하단 삽입
<?php
foreach ($list as $v) 
    echo "<div class="{$bo_table}" style="display:none">{$v['wr_content']} </div>";
?>

슈와이 님, 아래 환경에서 테스트해봤는데,

오토셋10
PHP7.2.10
그누5325최신
/theme/basic/index.php 하단 삽입
/theme/basic/skin/latest/basic/latest.skin.php 하단 삽입

아래 사항처럼 되게 하려면 ?

1.
검은색 모달 배경이 화면 전체를 덮게 하려면?
현재는 좌측 메인 영역쪽에서만 검게 되더라구요.
z-index 값을 올려봐도 마찬가지고....

2.
팝업창이 화면의 정중앙에 뜨게 하려면?
top 값을 50% 로 줘봐도 맨 위쪽에 붙어서 뜨네요.
인덱스 밑족의 게시물을 클릭하면 모달창이 화면위로 숨어서 안 보이는 증상....
---> fixed 방식으로 설정하니까 잘 되네요.

PS.
최신글 출력코드를 아래처럼 수정하셔야 할 것 같아요.
<?php
foreach ($list as $v)
    echo "<div class=\"{$bo_table}\" style=\"display:none\">{$v['wr_content']} </div>";
?>



( ^ _______ ^ ) ===b
구정 연휴 잘 보내세용. ~~

테스트 : 그누보드 5.3.2.5 원본, php 5.2 버전
다른 환경에서는 안될수 있으니 참고만 하세요

수정사항 // latest.skin.php 하단 삽입 에서
echo "<div class="{$bo_table}" style="display:none">{$v['wr_content']} </div>";
=>
echo "<div class=\"{$bo_table}\" style=\"display:none\">{$v['wr_content']} </div>";

약간 수정해 본 코드입니다.
근데, 메뉴색깔과 글씨가 모달 위로 올라오는데....원인을 모르겠네용.ㅋ

----------------------------------------------------------------------------------------
// tail.sub.php  </html> 코드 밑에 추가
----------------------------------------------------------------------------------------
<div id="popup"></div>
<div id="bg"></div>

<style>
#bg {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
display: none;
width:100%;
height:100%;
background-color: rgba(0,0,0,0.8);
}
#popup {
position: fixed;
top:50%;
z-index: 9999;
display: none;
padding:20px;
box-sizing:border-box;
width: 800px;
height: 400px;
overflow: auto;
background-color: rgba(255,255,255,1);
}
</style>

<script>
var $popup = $("#popup"), $bg = $("#bg");
$(".lat li").on("click", function(e) { 
    e.preventDefault();
    var i = $(this).index();
    var bo_table = $(this).find("a").attr("href").replace(/.+bo_table=([^&]+).+/, '$1');
    var html = $("." + bo_table).eq(i).html();
    $bg.show().css('height', $(document).height());
    $popup.show().html(html).css({'top' : $(window).height()/2 - $popup.height()/2, 'left' : $(window).width()/2 - $popup.width()/2 });
});
$bg.on("click", function() {
    $(this).hide();
    $popup.hide();
});
$popup.on("click", function() {
    $(this).hide();
    $bg.hide();
});
</script>


----------------------------------------------------------------------------------------
// latest.skin..php 하단
----------------------------------------------------------------------------------------

<?php
foreach ($list as $v)
    echo "<div class=\"{$bo_table}\" style=\"display:none\">{$v['wr_content']} </div>";
?>



ps.
아래 댓글 내용까지 모두 반영한 완성 코드

인덱스에 넣는 코드를 tail.sub.php 의 html 코드밖에 넣으니
검정색 부분이 화면 가득히 다 차네요.
저는 index.php 하단에 넣어서 본문쪽만 검어졌나 봐요. ㅎ

덕분에 오늘도 좋은 공부가 되었습니다. 감사합니다.

두 분 다 감사합니다.
그누보드 5.1.11, php 5.2 버전, MySQL 5.0 환경인데...아래의 수정사항까지 적용하여 보았는데...
아무런 변화가 없습니다.
아뭏든 감사합니다.
즐거운 설 연휴 되십시오~^^)

메인페이지의 최신글은 최신 글의 목록만 가져오는 프러그램이고 해당 제목을 클릭하면

게시판의 해당글의 뷰페이지로 이동합니다.

 

즉 게시글 보기를 모달로 하시려면 별도의 제작이 필요할듯 합니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 27
QA 내용 검색

회원로그인

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