如何在弹出的onclick按钮中显示文章内容

时间:2019-01-09 15:50:14

标签: php wordpress

我正在处理一个wordpress项目,我想显示我的文章,否则我创建一个包含现有文章标题的列表,并带有一个“显示更多详细信息”按钮,实际上,当用户单击此按钮时,弹出窗口将显示整个文章的内容,而不会将他带到包含文章详细信息的另一页。 网址:\ wcontent \ themes \ bizspeak \ mdf_templates \ any \ my_cars_3 \ index.php 如果我单击按钮会出现问题:“更多详细信息”总是弹出窗口仅显示第一篇文章的内容 这是我的代码

  <div class="row previews">
    <?php
       while ($mdf_loop->have_posts()) : $mdf_loop->the_post();
        ?> 
   <div class="row">
     <div class=" col-md-1 col-sm-1"></div> 
     <div class=" col-md-9 col-sm-9 col-xs-12">
        <div class="thumbnail">
            <?php
            if (has_post_thumbnail($post->ID))
            {
                echo '<a href="' . get_permalink($post->ID) . '" title="' . 
    esc_attr($post->post_title) . '">';
                echo '<img src="' . 
     MDTF_HELPER::get_post_featured_image($post->ID, '500x300') . '" alt="" 
      />';
                echo '</a>';
            }
            ?>
            <div class="caption" style="max-height: 650px;">
                 <div class="row">
         <div class=" col-md-8 col-sm-8 col-xs-8"> 
                 <h3 id="titleOffret"><?php the_title() ?></h3>

                <p style="text-align: center;" >
                    <?php echo do_shortcode('[inpost_fancy thumb_width="50" 
  thumb_height="50" post_id="' . $post->ID . '" thumb_margin_left="5" 
  thumb_margin_bottom="5" thumb_border_radius="200" thumb_shadow="0 1px 4px 
  rgba(0, 0, 0, 0.2)" id="" random="0" group="0" border="" 
  show_in_popup="0" album_cover="" album_cover_width="200" 
  album_cover_height="200" popup_width="800" popup_max_height="600" 
  popup_title="Gallery" type="fancy" sc_id="sc1413390928195"]') ?>
                </p>
                <?php echo do_shortcode('[mdf_post_features_panel]'); ?>

                <br />
                 </div>
                  <div class=" col-md-4 col-sm-4 col-xs-4">
                <div style="height: 60px;">

   <div class="container-fluid">
   <a class="btn button btn-default " target="_blank"  id="btnPlusDetails" 
   data-toggle="modal" data-target="#myModal">Plus de détails</a>
   <!-- Modal -->
   <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog" >
   <!-- Modal content-->
    <div class="modal-content">
    <div class="modal-header" id="idModal-header">
      <button type="button" class="close" data-dismiss="modal">&times; 
    </button>
      <h2 class="modal-title" id="titleModal">
      <?php the_title() ?></h2>
       <?php the_content(); ?>
    </div>
    <div class="modal-body"  id="idModal-body">
     <?php echo do_shortcode('[contact-form-7 id="1461" title="pop"]'); ?>
    </div>
    <div class="modal-footer" id="idModal-footer">
      <button type="button" class="btn btn-default" data- 
     dismiss="modal">Close</button>
    </div>
    </div> 
    </div>
    </div>
     </div>         
                </div>
               </div></div>
                <div style="clear: both;"></div>
            </div>
        </div>
        </div>
      <div class=" col-md-1 col-sm-1"></div> 
        </div>
       <?php endwhile; // end of the loop.     ?>
       </div>

there an image for more explanation

1 个答案:

答案 0 :(得分:0)

具有相同ID的多个“模式窗口”(div)

尝试更改:

<a class="btn button btn-default " target="_blank"  id="btnPlusDetails" data-toggle="modal" data-target="#myModal_<?php echo $post->ID; ?>">Plus de détails</a>

并且:

<div class="modal fade" id="myModal_<?php echo $post->ID; ?>" role="dialog">