Как настроить верстку модального окна, в котором открывается пост wordpress?

Question

[supercoder666]

Я настроил ajax в wordpress и он работает, но проблема состоит в том, что при нажатии на пост открывается модальное окно, внутри которого то же самое модальное окно. Может, это возможно как-то исправить? Вот код в functions.php:

add_action('wp_ajax_my_action', 'data_fetch');
add_action('wp_ajax_nopriv_my_action', 'data_fetch');
function data_fetch($postID){
    $postID=intval( $_POST['param'] );

    $args = array(
    'p' => $postID, // ID of a page, post, or custom type
    //’post_type’ => ‘any’
    );
    $recent = new WP_Query($args);
    while ( $recent->have_posts() ) : $recent->the_post();?>
    <div class="modal-content ajax popup">
         <div class="modal-header popupBg" style="background-image:linear-gradient(180deg, rgba(2,0,36,0) 0%, rgba(0,0,0,1) 100%), url(<?php echo get_the_post_thumbnail_url(); ?>);">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true"><i class="fas fa-times"></i></span>
        </div>
    <h1 class="modal-title"><?php the_title(); ?></h1>
    <span class="author"><time>09.09.09</time> Admin</span>
    <article class="modal-body">
        <?php the_content(); ?>
    </article>
    </div>
    <?php endwhile; ?>
<?php
    die();
}

И разметка самого модального окна в footer.php. Модальное окно от bootstrap

<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content ajax popup">
    	 <div class="modal-header popupBg" style="background-image:linear-gradient(180deg, rgba(2,0,36,0) 0%, rgba(0,0,0,1) 100%)">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
         	<span aria-hidden="true"><i class="fas fa-times"></i></span>
    	</div>
	<h1 class="modal-title"></h1>
	<span class="author"><time>09.09.09</time> Admin</span>
	<article class="modal-body">
		
	</article>
    </div>
  </div>
</div>

js из index.php

<script>
function fetch(e){var param = $(e.target).attr('data-ajax-param');
 // Находим id поста по нажатию кнопки. У кнопки должен быть атрибут data-ajax-param равный id поста, например, data-ajax-param="11"
  $.post('wp-admin/admin-ajax.php', {'action':'my_action', 'param':param}, function(response){
   $('.modal-body').html(response);
});
}
</script>
<script>
$( '[data-ajax-param]' ).click(function (e) {
 fetch(e);
});
</script>
<?php
get_footer();
?>

Comments

[Антон Литвиненко]

Ну так по коду вы и вставляете разметку модального окна в разметку модального окна, не?

[Орхан Гасанлы]

внутри рнр кода вы вставляете модальное окно в модальное окно, а вам надо в рнр коде вставить только содержимое статьи, а не модалку