Bootstrap模式不会显示PHP

时间:2018-04-12 10:10:33

标签: php twitter-bootstrap bootstrap-modal

当我点击每个特定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";
    }
?>

谢谢你的时间!

1 个答案:

答案 0 :(得分:1)

1-你正在产生很多不合适的模态。

2-make模板模板并使用ajax表示特定的id。

另外3-如果你想使用上面给出的相同代码那么你需要做你的模态,你的按钮应该在同一页面。 你有黑色背景&#39;因为目标事件无法找到模态 例如 这段代码

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>