On the archive page, by clicking on a news item, I need to implement the appearance of news in a modal window. Well, there is nothing difficult here if you use ajax.
Here is my js code:
const newsItem = document.querySelectorAll('.news-item');
if(newsItem !== null){
newsItem.forEach(item => {
item.addEventListener('click', function(){
let dataAttribute = item.getAttribute('data-new-id');
$.ajax({
type : 'POST',
url : wp_helper.ajax_url,
data : {
postid : dataAttribute,
action : 'loadmodal',
},
success : function( data ){
$('#exampleModal .modal-body').html(data);
lazyLoad();
}
});
});
});
}
$('.btn-close').on('click', function(){
$('#modal-content').empty();
})
And here is a part of the php function
add_action( 'wp_ajax_loadmodal', 'really_loadmodal' );
add_action( 'wp_ajax_nopriv_loadmodal', 'really_loadmodal' );
function really_loadmodal() {
$postid = $_POST[ 'postid' ];
$post = get_post($postid );
setup_postdata( $post );
if (have_rows('news_content',$postid)) {
echo $post->ID;
echo '<div class="modal-header">
<div class="navigation-arrows">
<div class="nav-arrow left"></div>
<div class="nav-arrow right"></div>
</div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>';
echo'<div class="news-single">';
while (have_rows('news_content',$postid)) : the_row();
if (get_row_layout() == 'section_title'){
/// Post data here
}
endwhile;
echo'</div>';
}
wp_reset_postdata();
wp_die();
}
Here you see these lines:
<div class="modal-header">
<div class="navigation-arrows">
<div class="nav-arrow left"></div>
<div class="nav-arrow right"></div>
</div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
They imply a jump to the previous and next post. And if I could get the IDs of these posts for the currently displayed in the modal window, I would easily implement this functionality using ajax. But I broke my head and spent a lot of time and not the solution. Guys, please help or in this case it will not be possible to implement this functionality?