模态窗口不会加载propper结果

时间:2015-03-04 08:14:45

标签: php jquery mysql

我在页面上没有拇指从mysql数据库加载。现在我想对它们进行按钮查看,当我点击打开带有更多信息的模态窗口时。

问题是始终在每个拇指上打开第一个项目(不同的id)。这就是我使用的。我想问题出在按钮上,但无法弄清楚如何修复它。

foreach($pdo->query("SELECT * FROM projects ORDER BY project_id") as $row) 
{
     echo '<div class="portfolio-item '.$row['project_category'].'">';
     echo '<div class="portfolio">';
     echo '<a href="#" data-lightbox-gallery="portfolio">';
     echo '<img src="'.$row['project_image'].'" alt="Portfolio 1">';
     echo '<div class="portfolio-overlay hvr-rectangle-out">';
     echo '<h2 class="margin-bottom-small">
               <strong class="white-color bold-text"></strong>
           </h2>';
     echo '<div class="button" data-toggle="modal" data-target="#portfolio-4">View More</div>';
            echo '</div><!-- END PORTFOLIO OVERLAY -->
              </a>
           </div>

        <div class="modal fade contact-form" id="portfolio-4" tabindex="-1" role="dialog" aria-labelledby="portfolio-4" aria-hidden="true">
           <div class="modal-dialog modal-lg">
              <div class="modal-content">
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
                 <div class="modal-body member-info">
                    <div class="row">
                       <div class="col-md-5 col-sm-5">
                          <figure>
                             <img src="'.$row['project_image'].'" alt="">
                          </figure>
                       </div>
                       <div class="col-md-7 col-sm-7">
                          <div class="description">
                             <h3><strong class="bold-text">'.$row['project_overlay'].'</strong></h3>
                             <div class="light-text">'.$row['project_title'].'</div>
                             <div class="about margin-top-medium">
                                  <p>'.$row['project_details'].'</p>
                             </div>
                          </div> <!-- *** end description *** -->
                       </div> <!-- *** end col-md-7 *** -->
                     </div> <!-- *** end row *** -->
                   </div> <!-- *** end modal-body *** -->
                </div> <!-- *** end modal-content *** -->
          </div> <!-- *** end modal-dialog *** -->
        </div> <!-- *** end Contact Form modal *** -->
      </div> <!-- *** end  portfolio-item *** -->';
 }                           

1 个答案:

答案 0 :(得分:0)

乍一看(我不知道你正在使用什么插件)我会检查这一行:... div class =“modal fade contact-form”id =“portfolio-4” 按钮触发此模态data-target =“#portfolio-4”&gt;

所以我会得到每一行的索引并将其附加到模态的id,然后在按钮data-target中我也会附加该索引...(所以ID不同)希望它有所帮助,我做了相同但使用bootstrap。