테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

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

허당빵 6년 전 조회 4,468
답변 2
목록

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

 

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

 

감사합니다.

#그누보드5 #최신글 #모달창
댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
슈
슈와이
6년 전

</p>

<p>// index.php 하단삽입</p>

<p><div id="popup"></div></p>

<p><div id="bg"></div></p>

<p><style></p>

<p>#popup { position: absolute; z-index: 999; display: none; width: 800px; height: 500px; overflow: auto; background-color: #fff}</p>

<p>#bg { position: absolute;  z-index: 900; top: 0; left: 0; display: none; width:100%; background-color: #000}</p>

<p></style></p>

<p><script></p>

<p>var $popup = $("#popup"), $bg = $("#bg");</p>

<p>$(".lat li").on("click", function(e) {   </p>

<p>    e.preventDefault();</p>

<p>    var i = $(this).index();</p>

<p>    var bo_table = $(this).find("a").attr("href").replace(/.+bo_table=([^&]+).+/, '$1'); </p>

<p>    var html = $("." + bo_table).eq(i).html(); </p>

<p>    $bg.show().css('height', $(document).height());</p>

<p>    $popup.show().html(html).css({'top' : $(window).height()/2 - $popup.height()/2, 'left' : $(window).width()/2 - $popup.width()/2 });</p>

<p>});</p>

<p>$popup.on("click", function() {</p>

<p>    $(this).hide();</p>

<p>    $bg.hide();</p>

<p>});</p>

<p></script></p>

<p> </p>

<p>// latest.skin.php 하단 삽입</p>

<p><?php</p>

<p>foreach ($list as $v) </p>

<p>    echo "<div class="{$bo_table}" style="display:none">{$v['wr_content']} </div>";</p>

<p>?></p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 6개

s
sinbi
6년 전
슈와이 님, 아래 환경에서 테스트해봤는데,

오토셋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
구정 연휴 잘 보내세용. ~~
�
슈와이
6년 전
테스트 : 그누보드 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>";
s
sinbi
6년 전
약간 수정해 본 코드입니다.
근데, 메뉴색깔과 글씨가 모달 위로 올라오는데....원인을 모르겠네용.ㅋ

----------------------------------------------------------------------------------------
// 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.
아래 댓글 내용까지 모두 반영한 완성 코드
�
슈와이
6년 전
데모 http://shuai0.dothome.co.kr/
s
sinbi
6년 전
인덱스에 넣는 코드를 tail.sub.php 의 html 코드밖에 넣으니
검정색 부분이 화면 가득히 다 차네요.
저는 index.php 하단에 넣어서 본문쪽만 검어졌나 봐요. ㅎ

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

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

유찬아빠

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

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

 

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

로그인 후 평가할 수 있습니다

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

답변을 작성하려면 로그인이 필요합니다.

로그인