douju6542
2018-04-12 10:10
浏览 52
已采纳

Bootstrap模式不会显示PHP

I want to show a bootstrap modal when I click on the button for each specific ID a new modal. But the problem is that I only see the dark background from the modal when I click on the button.

Here is the code where I generate the buttons with specific id's for the modals:

<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>

And here is the code where I generate the modals:

<?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";
    }
?>

Thanks for your time!

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dongni8124 2018-04-12 10:47
    已采纳

    1- you are generating lot of modal which is not good.

    2-make modal template and use ajax for particular id.

    3- other wise if you want to use same code which is given above then you need to do your modal and your button should in same page. you got black background that'because target event is not able to find modal for example this code

    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";
    }
    

    and this code

    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";
        }
    

    should be in same page.

    4-if you are not able to fix then use this method your td should be like this

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

    and JavaScript should be like this

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

相关推荐 更多相似问题