메인에 게시판 최신글을 불러오고 있는데 내용을 팝업으로 띄우려고 합니다
옃이
4년 전
조회 2,505


안녕하세요 ㅎㅎ
홈페이지 메인에 특정 게시판의 최신글을 불러오는 기능을 구현하고 있습니다
현재 ajax로 게시판의 글 중 제목과 내용, 날짜를 가져와 제목, 날짜는 목록에 뿌리고 있는데
제목을 클릭하면 그 게시물에 해당하는 내용을 팝업으로 띄우려니까 잘 안되네요...
현재 모집이라는 글자가 들어간 게시물 제목은 실제 게시물이 아니라 html로 임의로 넣어준 내용입니다
레이어 팝업을 불러오는 js입니다
</p>
<p>$(document).ready(function(){ //레이어팝업
$('.pop_challenge').modal({ //challenge
target : '#Modal1',
speed : 200,
easing : 'easeInOutExpo',
animation : 'top',
//position: '5% auto',
overlayClose : false,
close : '.popup_close'
});</p>
<p> $('.pop_notice').modal({ //notice
target : '#Modal2',
speed : 200,
easing : 'easeInOutExpo',
animation : 'top',
//position: '5% auto',
overlayClose : false,
close : '.popup_close'
});</p>
<p> //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');//브라우져에 터치를 다시 활성화
// 팝업창 및 사이드메뉴를 비활성화하는 코드 삽입..
});</p>
<p>});
</p>
<p>
팝업.php입니다
(한 파일 안에 js와 팝업 html, 메인html 이 다 같이 있는게 아니라 각각 따로 php파일로 만들어 인클루드 해서 사용하고 있습니다 )
</p>
<p><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--></p>
<p> <a class="popup_close"><i class="la la-times"></i></a>
</div>
<!--e pop_cont-->
</div></p>
<p>
그리고 게시물을 메인에 가져와주는 ajax입니다
</p>
<p> $.ajax({
type:"POST",
url: "ajax.news_board.php",
data:{
method:"check"
},
success:function(data){</p>
<p> 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;
</p>
<p> </p>
<p>
모달에 어ㅓ떻게 하면 특정 게시물의 내용을 넣을 수 있을까요...?
댓글을 작성하려면 로그인이 필요합니다.
답변 3개
마르스컴퍼니
Expert
4년 전
* ajax.news_board.php
</p>
<p><?php
include '../common.php'; //경로 확인 필요</p>
<p>$sql = "
select *
from g5_write_news
where wr_id = '{$wr_id}'
";</p>
<p>$row = sql_fetch($sql);
?></p>
<p> <!--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--></p>
<p>
* 게시물을 메인에 가져와주는 ajax
</p>
<p>var _id = "5";</p>
<p> $.ajax({
type:"POST",
url: "ajax.news_board.php",
data:{
method:"check",</p>
<p> wr_id : _id
},
success:function(data){
$('#Modal2').html(data);
}
});</p>
<p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
4년 전
1. 버튼을 클릭할때 게시물 아이디를 던져준다
2. 게시물 아이디를 가지고 디비를 조회한다
3. 결과물을 뿌려준다
위의 과정을 구현하시면 됩니다
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인