메인에 게시판 최신글을 불러오고 있는데 내용을 팝업으로 띄우려고 합니다
본문
안녕하세요 ㅎㅎ
홈페이지 메인에 특정 게시판의 최신글을 불러오는 기능을 구현하고 있습니다
현재 ajax로 게시판의 글 중 제목과 내용, 날짜를 가져와 제목, 날짜는 목록에 뿌리고 있는데
제목을 클릭하면 그 게시물에 해당하는 내용을 팝업으로 띄우려니까 잘 안되네요...
현재 모집이라는 글자가 들어간 게시물 제목은 실제 게시물이 아니라 html로 임의로 넣어준 내용입니다
레이어 팝업을 불러오는 js입니다
$(document).ready(function(){ //레이어팝업
$('.pop_challenge').modal({ //challenge
target : '#Modal1',
speed : 200,
easing : 'easeInOutExpo',
animation : 'top',
//position: '5% auto',
overlayClose : false,
close : '.popup_close'
});
$('.pop_notice').modal({ //notice
target : '#Modal2',
speed : 200,
easing : 'easeInOutExpo',
animation : 'top',
//position: '5% auto',
overlayClose : false,
close : '.popup_close'
});
//popup활성화
$('.md_pop').on('click', function(){
$("html, body").css({'overflow':'hidden'}).bind('touchmove'); //브라우져에 터치를 막아 스크롤을 막는 코드
// 팝업창 및 사이드메뉴를 활성화하는 코드 삽입..
});
//popup비활성화
$('.popup_close').on('click', function(){
$("html, body").css({'overflow':'visible'}).unbind('touchmove');//브라우져에 터치를 다시 활성화
// 팝업창 및 사이드메뉴를 비활성화하는 코드 삽입..
});
});
팝업.php입니다
(한 파일 안에 js와 팝업 html, 메인html 이 다 같이 있는게 아니라 각각 따로 php파일로 만들어 인클루드 해서 사용하고 있습니다 )
<div id="Modal2" class="pop_modal">
<!--s pop_cont-->
<div class="pop_cont">
<!--s ntc_tltBox-->
<div class="ntc_tltBox">
<div class="tlt">[모집] 모집합니다.</div>
<div class="data">2021-04-06</div>
</div>
<!--e ntc_tltBox-->
<!--s ntc_content-->
<div class="ntc_content">
내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용
</div>
<!--e ntc_content-->
<a class="popup_close"><i class="la la-times"></i></a>
</div>
<!--e pop_cont-->
</div>
그리고 게시물을 메인에 가져와주는 ajax입니다
$.ajax({
type:"POST",
url: "ajax.news_board.php",
data:{
method:"check"
},
success:function(data){
var json = JSON.parse(data);
if (json['result'] == 200){
var count = json['board_ary'].length;
//$('#notice_News').empty();
for (i=0; i<count; i++)
{
$('#notice_News').append('<li class="testli"><a href="#n" class="pop_notice md_pop" id="pop1234"><p>'+json['board_ary'][i][0]+'</p><div class="data">'+json['board_ary'][i][2]+'</div></a></li>'); //ajax로 가져온 데이터를 append함수로 추가해주고 있습니다
//$('.tlt').val(json['board_ary'][i][0]);
//$('.data').val(json['board_ary'][i][2]);
//$('.ntc_content').val(json['board_ary'][i][1]);
}
for (var j = 0; j < document.querySelectorAll('.testli').length; j++){
document.querySelectorAll('.testli')[j].setAttribute('onclick','test123();');
}
}
},
beforeSend:function(){
// $.blockUI.defaults.baseZ = 999999;
// $.blockUI({ message: '<span style="font-size:16px">Please Wait...</span>' });
},
complete:function(){
// $.unblockUI();
},
error:function(e){
alert("데이터 전송 지연이 발생합니다. 잠시후에 시도해주세요.");
return;
},
timeout:5000
})//ajax;
모달에 어ㅓ떻게 하면 특정 게시물의 내용을 넣을 수 있을까요...?
답변 3
ajax를 board.php?wr_id=[게시물번호]로 던지고 받아온 데이터를 html로 뿌려보세요
그게 아니라면 게시물 조회 쿼리를 짠다음 content를 찍어오도록 제작하시면 됩니다
1. 버튼을 클릭할때 게시물 아이디를 던져준다
2. 게시물 아이디를 가지고 디비를 조회한다
3. 결과물을 뿌려준다
위의 과정을 구현하시면 됩니다
* ajax.news_board.php
<?php
include '../common.php'; //경로 확인 필요
$sql = "
select *
from g5_write_news
where wr_id = '{$wr_id}'
";
$row = sql_fetch($sql);
?>
<!--s pop_cont-->
<div class="pop_cont">
<!--s ntc_tltBox-->
<div class="ntc_tltBox">
<div class="tlt"><?php echo $row['wr_subject'] ?></div>
<div class="data"><?php echo $row['wr_datetime'] ?></div>
</div>
<!--e ntc_tltBox-->
<!--s ntc_content-->
<div class="ntc_content">
<?php echo $row['wr_content'] ?>
</div>
<!--e ntc_content-->
<a class="popup_close"><i class="la la-times"></i></a>
</div>
<!--e pop_cont-->
* 게시물을 메인에 가져와주는 ajax
var _id = "5";
$.ajax({
type:"POST",
url: "ajax.news_board.php",
data:{
method:"check",
wr_id : _id
},
success:function(data){
$('#Modal2').html(data);
}
});
답변을 작성하시기 전에 로그인 해주세요.
