顯示自舉動態模式

Question

我想按下按鈕時，顯示一個模式「Věžírezolvare」

我有按鈕的下面的代碼：

<div class="col-md-4 text-center patrat-block"> 
       <div class="thumbnail"> 
        <img class="img-responsive" src="img/LogoProbleme/pg1logo-v2.jpg" alt=""> 
        <div class="caption"> 
         <h3>Problema 1<br> 
         <small>Gradina</small> 
        </h3> 
         <p>Află dimensiunile grădinii</p> 
         <ul class="list-inline"> 
          <li> 
           <a href="probleme.php?id=1&category=g"><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Problema"><span class="glyphicon glyphicon-pencil"></span> Vezi Rezolvare </button></a> 
          </li> 

         </ul> 
        </div> 
       </div> 
      </div> 

而modal content + php：

<?php 
     if(isset($_GET['id'])&&isset($_GET['category'])) 
     { 
      $id=$_GET['id']; 
      $category=$_GET['category']; 
      $sql = "SELECT cerinta, rezolvare FROM probleme WHERE id='".$id."'AND category='".$category."'";  
      $result = $conn->query($sql); 
      if ($result->num_rows > 0) { 

      while($row = $result->fetch_assoc()) 
      { 
       $cerinta=$row["cerinta"]; 
       $rezolvare=$row["rezolvare"]; 
      } 
       $_SESSION["cerinta"]=$cerinta; 
       $_SESSION["rezolvare"]=$rezolvare; 
     } 
     } 
     ?> 
     <div id="Problema" class="modal fade" role="dialog"> 
      <div class="modal-dialog"> 

       <!-- Modal content--> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal">&times;</button> 
         <h4 class="modal-title">Problema</h4> 
        </div> 
        <div class="modal-body"> 
         <h4>Cerinta</h4> 
         <div class="well"> 
          <?php echo $cerinta;?> 
         </div> 

         <h4>Rezolvare</h4> 
         <div class="well"> 
          <?php echo $rezolvare;?> 
         </div> 
        </div> 
        <div class="modal-footer"> 
         <button type="button" class="btn btn-default" data-dismiss="modal">Inchide fereastra</button> 
        </div> 
       </div> 

      </div> 
     </div> 

這是試圖完成的是顯示在我的數據庫中有一些信息的模式。我檢查了這些值併成功存儲在$ cerinta和$ rezolvare中。

看起來好像當按鈕被按下時，快速淡入淡出，我被重定向到頁面的頂部，而不顯示模式。我把一個<a href="probleme.php?id=1&category=g">，所以我知道什麼按鈕被按下，但它似乎刷新頁面和模態不顯示。我怎樣才能讓模態顯示？

Answer 1

在achor <a>中嵌套<button>是無效的html語法，因爲它無法分辨哪個被點擊。此外，該主播還有一個href與「＃」不同，因此它只是將您重定向到probleme.php?id=1&category=g。您可以按如下修改代碼（未測試）：

1. 從錨點刪除按鈕，改變錨：

<a href="probleme.php?id=1&category=g" class="btn btn-primary" 
    data-toggle="modal" data-target="#Problema"> 
    <span class="glyphicon glyphicon-pencil"></span> Vezi Rezolvare 
</a> 

將模板的模板放在您html的某處：

<div id="Problema" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Problema</h4> 
      </div> 
      <div class="modal-body"> 
       Some fine body 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal"> 
        Inchide fereastra 
       </button> 
      </div> 
     </div> 
    </div> 
</div> 

修改您的PHP只返回模態的主體：

<?php 
    // Some good php 
    echo(" 
     <h4>Cerinta</h4> 
     <div class=\"well\"> 
      {$cerinta)} 
     </div> 
     <h4>Rezolvare</h4> 
     <div class=\"well\"> 
      {$rezolvare} 
     </div>"); 
// The modal body is returned by php 
?> 

使用ajax檢索模態體並隨後打開模態。東西的線路：

$(document).ready(function() { 
    // Assign some id to the anchor say id="myAnchor" 
    $('#myAnchor1').click(function(e) { 
     e.preventDefault(); 
     // get the modal 
     var modal = $($(this).data("data-target")); 
     var url = $(this).attr("href"); 
     var request = $.get(url); 
     request.done(function(response) { 
      // get modal 
      modal.find(".modal-body").html(response); 
      modal.modal("show"); 
     }); 
    }); 
});