Question

我正在尝试创建一个模式弹出窗口，当用户点击特定按钮但模态只显示一次。我有两个不同的PHP文件。第二个发送回声HTML内容到另一个具体div。以下是PHP第二个文件的代码：

 echo '                        
   <div class="row top-buffer">
     <div class="articles">
        <div class="col-md-6">
        <img class="img-rounded" src="'. $image .'" alt="MyImage" width="550px" height="240px"/>
       </div>
      <div class="col-md-6">
     <p style="font-size: 22px;font-weight: normal;color:#7f8c8c">'. $title .'</p>
     <p id="article_p" style="max-width:550px;max-height:140px">'. $description .'...</p>              
       <div class="row top-buffer">
       <div class="col-md-6">
       <img src="img/link_icon.png" class="img-rounded"/>
       <a href="www.link.com"><span style="font-size: 20px;font-weight: normal;margin-left: 2%">www.link.com</span></a>
                                        </div>
            <div class="col-md-6"> 
          <button class="btn btn-primary pull-right" id="label3">View Details</button>
                </div>
             </div> 
         </div>
     </div>
  </div>';

   echo '<!-- Modal -->
         <div class="modal fade" id="modelWindow" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
         <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
         <h4 class="modal-title">'. $title .'</h4>
         </div>
         <div class="modal-body">
         <img class="img-rounded" src="'. $image .'" alt="MyImage" width="550px" height="240px">
          <p class="well">'. $description .'<p>

         </div>
         <div class="modal-footer">
         <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
                           </div>
                      </div>
                 </div>
            </div>   
              <!-- End Of Modal --> ';
    };


    echo '<script type="text/javascript">
    $("#label3").click(function() {
    $("#modelWindow").modal("toggle");
    });
  </script>';

所以有3 echo's。内容的第一个，第二个是模态，第三个触发模态。正如我所说，模态显示 ONLY ONCE 和我无法理解原因。我需要在此文件中包含一些js或css文件吗？任何想法都会有所帮助..

Answer 1

您的代码实际上运行得很好。我尝试将虚假内容放在一起，如下所示。请注意我添加到HTML代码中的js和css文件。

更新：我尝试将4个按钮和4个模态放入代码中。不确定您是否觉得这有用。

$("#label1").click(function() {
  $("#modelWindow_1").modal("toggle");
});

$("#label2").click(function() {
  $("#modelWindow_2").modal("toggle");
});

$("#label3").click(function() {
  $("#modelWindow_3").modal("toggle");
});

$("#label4").click(function() {
  $("#modelWindow_4").modal("toggle");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<button class="btn btn-primary pull-right" id="label4">View Details 4</button>
<button class="btn btn-primary pull-right" id="label3">View Details 3</button>
<button class="btn btn-primary pull-right" id="label2">View Details 2</button>
<button class="btn btn-primary pull-right" id="label1">View Details 1</button>

<div class="modal fade" id="modelWindow_1" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Title 1</h4>
      </div>
      <div class="modal-body">
        <img class="img-rounded" src="http://static.independent.co.uk/s3fs-public/thumbnails/image/2016/01/29/11/Taylor-Swift-revenge-nerds.jpg" alt="MyImage" width="550px" height="240px">
        <p class="well">Some description 1
          <p>

      </div>
      <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modelWindow_2" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Title 2</h4>
      </div>
      <div class="modal-body">
        <img class="img-rounded" src="http://static.independent.co.uk/s3fs-public/thumbnails/image/2016/01/29/11/Taylor-Swift-revenge-nerds.jpg" alt="MyImage" width="550px" height="240px">
        <p class="well">Some description 2
          <p>

      </div>
      <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modelWindow_3" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Title 3</h4>
      </div>
      <div class="modal-body">
        <img class="img-rounded" src="http://static.independent.co.uk/s3fs-public/thumbnails/image/2016/01/29/11/Taylor-Swift-revenge-nerds.jpg" alt="MyImage" width="550px" height="240px">
        <p class="well">Some description 3
          <p>

      </div>
      <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modelWindow_4" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Title 4</h4>
      </div>
      <div class="modal-body">
        <img class="img-rounded" src="http://static.independent.co.uk/s3fs-public/thumbnails/image/2016/01/29/11/Taylor-Swift-revenge-nerds.jpg" alt="MyImage" width="550px" height="240px">
        <p class="well">Some description 4
          <p>

      </div>
      <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
      </div>
    </div>
  </div>
</div>

模态仅在php echo后显示一次

1 个答案: