초기화면의 최신 글의 내용만을 모달창으로 하려면...
본문
안녕하세요?
설 연휴 잘 보내시고 고향 길 편히 다녀 오십시오~^^)
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 환경인데...아래의 수정사항까지 적용하여 보았는데...
아무런 변화가 없습니다.
아뭏든 감사합니다.
즐거운 설 연휴 되십시오~^^)
메인페이지의 최신글은 최신 글의 목록만 가져오는 프러그램이고 해당 제목을 클릭하면
게시판의 해당글의 뷰페이지로 이동합니다.
즉 게시글 보기를 모달로 하시려면 별도의 제작이 필요할듯 합니다.
