Question

我有以下页面通过使用bootstrap模式确认删除表项。当我点击删除按钮时，我看不到模态div。我错了什么？

<?php
    $content = [0=>["news_id"=>1,"news_title"=>"Hürriyet","news_date"=>"Bugün","news_content"=>"siyaset"],
                1=>["news_id"=>2,"news_title"=>"Milliyet","news_date"=>"Yarın","news_content"=>"ekonomi"],
                2=>["news_id"=>3,"news_title"=>"Sabah","news_date"=>"Dün","news_content"=>"politika"]]
  ?>
    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body> 

<script type="text/javascript">
$(function(){
$(".btn-show-modal").click(function(e){ 
  e.preventDefault();
  var id = $(this).attr('id'); 
  var modal_id = "dialog-example_"+id; 
  $("#"+modal_id).modal('show');
});

$(".btn btn-danger").click(function(e) {
  var id = $(this).attr('id');
  var modal_id = "dialog-example_"+id;
  $("#"+modal_id).modal('hide');
});

});
</script>

    <div class="container">

          <!-- Modal -->
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th width="60">ID</th>
                    <th width="200">Title</th>
                    <th width="150">Date Posted</th>
                    <th>Content</th>
                    <th width="200">Image</th>
                    <th width="200">Action</th>
                </tr>
            </thead>
            <tbody>
            <?php

            foreach ($content as $row) {
            ?>
                <tr>
                    <td><?php echo $row['news_id']; ?></td>
                    <td><?php echo $row['news_title']; ?></td>
                    <td><?php echo $row['news_date']; ?></td>
                    <td><?php echo $row['news_content']; ?></td>
                    <td><img style="height:50px; width:50px;" src=""  ></td>
                    <td>
                         <a href="edit2.php?newsid=<?php echo $row['news_id'];?>" class='btn btn-info left-margin'><span class="glyphicon glyphicon-edit"></span> Edit</a>
                         <a href="#<?php $row['news_id'] ?>" id="<?php echo $row['news_id'] ?>" data-id="<?php echo $row['news_id'] ?>" class='btn-show-modal' data-toggle="modal" title="Delede Record"><span class="glyphicon glyphicon-remove"></span> Delete</a>
                    </td>
                <div class="modal hide fade" id="dialog-example_<?php echo $row['news_id'] ?>">
                      <div class="modal-header">
                        <h5>Confirm Delete</h5>
                      </div>
                      <div class="modal-body">
                        <p class="modaltext">Are you sure you want to delete this record?</p>
                      </div>    
                      <div class="modal-footer">
                        <a href="#" data-dismiss="modal" class="btn btn-info">No</a>
                        <a href="delete-project.php?code=<?php echo $row['news_id']; ?>" 
                          class="btn btn-danger" id="<?php echo $row['news_id'] ;?>">Yes</a>
                      </div>
                </div>
                </tr>
            <?php
            }
            ?>
            </tbody>
        </table>
    </div>
    </body>
    </html>

因此我无法看到我的代码是否正在运行。

Answer 1

工作代码！

我重写了你的模态并改变了它对按钮元素的onclick =“”函数的打开方式。

<?php
$content = [0=>["news_id"=>1,"news_title"=>"Hürriyet","news_date"=>"Bugün","news_content"=>"siyaset"],
1=>["news_id"=>2,"news_title"=>"Milliyet","news_date"=>"Yarın","news_content"=>"ekonomi"],
2=>["news_id"=>3,"news_title"=>"Sabah","news_date"=>"Dün","news_content"=>"politika"]]
?>
  <!DOCTYPE html>
  <html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>

  <body>

    <div class="container">

      <!-- Modal -->
      <table class="table table-bordered">
        <thead>
          <tr>
            <th width="60">ID</th>
            <th width="200">Title</th>
            <th width="150">Date Posted</th>
            <th>Content</th>
            <th width="200">Image</th>
            <th width="200">Action</th>
          </tr>
        </thead>
        <tbody>
          <?php

foreach ($content as $row) {
    ?>
            <tr>
              <td>
                <?php echo $row['news_id']; ?>
              </td>
              <td>
                <?php echo $row['news_title']; ?>
              </td>
              <td>
                <?php echo $row['news_date']; ?>
              </td>
              <td>
                <?php echo $row['news_content']; ?>
              </td>
              <td><img style="height:50px; width:50px;" src=""></td>
              <td>
                <a href="edit2.php?newsid=<?php echo $row['news_id'];?>" class='btn btn-info left-margin'>
                  <span class="glyphicon glyphicon-edit">Edit</span>
                </a>

                <a onclick="$('#dialog-example_<?php echo $row['news_id'] ?>').modal('show');" href="#" class='btn-show-modal' data-toggle="modal" title="Delede Record">
    <span class="glyphicon glyphicon-remove"></span> Delete
                </a>
              </td>

              <div id="dialog-example_<?php echo $row['news_id'] ?>" class="modal fade" role="dialog">
                <div class="modal-dialog">

                  <!-- Modal content-->
                  <div class="modal-content" id="dialog-example_<?php echo $row['news_id'] ?>">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">&times;</button>
                      <h4 class="modal-title">Confirm Delete</h4>
                    </div>

                    <div class="modal-body">
                      <p>Are you sure you want to delete this record?</p>
                    </div>

                    <div class="modal-footer">
                      <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
                      <a href="#" data-dismiss="modal" class="btn btn-info" onclick="$('#dialog-example_<?php echo $row['news_id'] ?>').modal('hide');">No</a>
                      <a href="delete-project.php?code=<?php echo $row['news_id']; ?>" class="btn btn-danger" id="<?php echo $row['news_id'] ;?>">Yes</a>
                    </div>
                  </div>

                </div>
              </div>

            </tr>
            <?php
}
?>
        </tbody>
      </table>
    </div>
  </body>

  </html>

使用Bootsrap删除确认

1 个答案: