Bootstrap modal不與PHP一起顯示

Question

當我單擊每個特定ID的按鈕時，我想顯示一個引導程序模態。 但是問題是，當我單擊按鈕時，只能從模態中看到深色背景。

這是我為模態生成具有特定id's按鈕的代碼：

<div class="panel-body">
  <table class="table table-striped table-hover">
      <tr>
          <th>Website</th>
          <th>E-mail</th>
          <th></th>
          <th></th>
      </tr>
      <?php
          if ($result->num_rows > 0) {
                // output data of each row
                while($row = $result->fetch_assoc()) {
                    echo "<tr id='". $row["inzendingId"]. "'><td id='row_". $row["websiteNaam"]. "'>" . $row["websiteNaam"]. "</td><td id='row_". $row["Email"]. "'>" . $row["Email"]. "</td><td></td><td style='float: right; width: 100%;'><a class='btn btn-primary' id='hoi' type='button' data-toggle='modal' data-target='#". $row["inzendingId"]. "' onclick='fillEditFields()' style='float:right; margin-right: 5px;'>Selecteren</a> </td></tr>";
                }
            } else {
                echo "0 results";
            }
      ?>
  </table>
</div>

這是我生成模態的代碼：

<?php
  if ($result2->num_rows > 0) {
        // output data of each row
        while($row = $result2->fetch_assoc()) {
            echo "<div class='modal fade' id='". $row["inzendingId"]. "' tabindex='-1' role='dialog' aria-labelledby='myModalLabel'>
  <div class='modal-dialog' role='document'>
    <div class='modal-content'>
     <form action='php/edit.php?id=type' method='post' id='formTypeBewerken' enctype='multipart/form-data'>
      <div class='modal-header'>
        <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
        <h4 class='modal-title' id='myModalLabel'>Type bewerken</h4>
      </div>
      <div class='modal-body'>
       <div class='form-group'>
            <label>Type ID</label>
            <input type='text' id='typeId' name='typeid' class='form-control' readonly='readonly'>
        </div>
        </div>
      </div>
      <div class='modal-footer'>
        <button type='button' class='btn btn-default' data-dismiss='modal'>Sluiten</button>
      </div>
    </form>
    </div>
  </div>
</div>";
        }
    } else {
        echo "0 results";
    }
?>

謝謝你的時間！

Answer 1

1-您正在生成很多模態，這是不好的。

2-制作模態模板，並使用ajax作為特定的ID。

3-否則，如果要使用上面給出的相同代碼，則需要進行模態設置，並且按鈕應位於同一頁面中。 您有黑色背景，因為目標事件無法找到模態，例如此代碼

if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
    echo "<tr id='". $row["inzendingId"]. "'><td id='row_". $row["websiteNaam"]. "'>" . $row["websiteNaam"]. "</td><td id='row_". $row["Email"]. "'>" . $row["Email"]. "</td><td></td><td style='float: right; width: 100%;'><a class='btn btn-primary' id='hoi' type='button' data-toggle='modal' data-target='#". $row["inzendingId"]. "' onclick='fillEditFields()' style='float:right; margin-right: 5px;'>Selecteren</a> </td></tr>";
}
} else {
echo "0 results";
}

和這段代碼

if ($result2->num_rows > 0) {
        // output data of each row
        while($row = $result2->fetch_assoc()) {
            echo "<div class='modal fade' id='". $row["inzendingId"]. "' tabindex='-1' role='dialog' aria-labelledby='myModalLabel'>
  <div class='modal-dialog' role='document'>
    <div class='modal-content'>
     <form action='php/edit.php?id=type' method='post' id='formTypeBewerken' enctype='multipart/form-data'>
      <div class='modal-header'>
        <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
        <h4 class='modal-title' id='myModalLabel'>Type bewerken</h4>
      </div>
      <div class='modal-body'>
       <div class='form-group'>
            <label>Type ID</label>
            <input type='text' id='typeId' name='typeid' class='form-control' readonly='readonly'>
        </div>
        </div>
      </div>
      <div class='modal-footer'>
        <button type='button' class='btn btn-default' data-dismiss='modal'>Sluiten</button>
      </div>
    </form>
    </div>
  </div>
</div>";
        }
    } else {
        echo "0 results";
    }

應該在同一頁上。

4-如果您無法修復，請使用此方法，您的td應該像這樣

<tr>
   <td id="demo" onclick="getId(this.id)">Click</td>
</tr>

和JavaScript應該是這樣的

<script type="text/javascript">
    function getId(id){
        $('#'+id).modal('show');
    }    
</script>