Удалить подтверждение с помощью Bootsrap

-1

У меня есть следующая страница, чтобы подтвердить удаление элемента таблицы с помощью bootstrap modal. Когда я нажимаю кнопку «Удалить», я не вижу модального div. Что случилось?Удалить подтверждение с помощью Bootsrap

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

Из-за этого я не вижу, работает ли мой код.

источник

2016-12-29 Yusuf ÇAKIRCA

Вы должны попытаться загрузить bootstrap и jquery перед тегом скрипта. –

Я думаю, что я уже загрузил их перед тегом скрипта. –

Попробуйте увидеть 'modal_id' в консоли. Это нормально? –

Рабочий код!

Я переписал ваш модальный вариант и изменил способ его открытия на функции 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>

источник

2016-12-29 10:10:11 Acidic

Возможно, вы захотите изменить бутстрап js и css urls обратно на свой собственный :) – Acidic

Хорошо, спасибо .;) Следующий шаг, Как я могу отправить идентификатор элемента на страницу delete-project.php с помощью метода post.) –

http://pastebin.com/raw/rEekmBX7 Попробуйте посмотреть, работает ли это – Acidic

Удалить подтверждение с помощью Bootsrap

ответ

Смежные вопросы