Bootstrap 3:添加确认模式框jQuery内联删除行

Bootstrap 3 : add confirm modal box for jQuery Inline delete row

本文关键字：jQuery 删除行 模式 添加 确认 Bootstrap      更新时间：2023-09-26

我有这个jQuery函数从MySQL删除行数据。这与jQuery confirm工作，我需要添加Bootstrap 3 modal box确认。

JS: 

function deleteBox(id){
    if (confirm("Are you sure you want to delete this record?"))
    {
      var dataString = 'id='+ id;
      $("#flash_"+id).show();
      $("#flash_"+id).fadeIn(400).html('<img src="image/loading.gif" /> ');
      $.ajax({
      type: "POST",
      url: "delete.php",
      data: dataString,
      cache: false,
      success: function(result){
               if(result){
                    $("#flash_"+id).hide();
                    // if data delete successfully
                    if(result=='success'){
                         //Check random no, for animated type of effect
                         var randNum=Math.floor((Math.random()*100)+1);
                         if(randNum % 2==0){
                            // Delete with slide up effect
                            $("#list_"+id).slideUp(1000);
                         }else{
                            // Just hide data
                            $("#list_"+id).hide(500);
                         }
                    }else{
                         var errorMessage=result.substring(position+2);
                         alert(errorMessage);
                    }
              }
      }
      });
    }
}
HTML: 

<a href="javascript:void()"><img alt="Delete" title="Delete" width="20" src="image/delete.jpg" onclick=deleteBox("1") border="0"></a>

我怎么能添加bootstrap 3确认模态框这个功能?!

显然你应该在你的html代码中实现一个模态框。该模态应该有两个按钮(ok和cancel)具有独特的id属性(可能在modal-footerdiv内)

# your modal code around...
  <div class="modal-footer">
    <button type="button" class="btn btn-danger" id="btnDeleteYes" href="#">Yes</button>
    <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
  </div>
# ...

点击btnDeleteYes应该触发你的内部逻辑:

$('#btnDeleteYes').click(function () {
    var dataString = 'id='+ id;
    $("#flash_"+id).show();
    $("#flash_"+id).fadeIn(400).html('<img src="image/loading.gif" /> ');
    # here goes your logics with ajax query and so on
    # ...
    # you may also want to hide your modal box at some point
});

你也可以尝试使用bootstrap模式来创建对话框，而不是从头开始实现它。这将使您从编写模态html代码和手动实现回调的必要性中解脱出来。

下面是你的代码: 
bootbox.dialog({
  message: "Are you sure you want to delete this record?",
  title: "Confirm your choice",
  buttons: {
    confirmation: {
      label: "Yes, delete it",
      className: "btn-success",
      callback: function() {
        var dataString = 'id='+ id;
        $("#flash_"+id).show();
        $("#flash_"+id).fadeIn(400).html('<img src="image/loading.gif" /> ');
        # here goes your logics with ajax query and so on
        # ...
      }
    },
    refuse: {
      label: "No, leave it alive",
    },
  }
});
相关文章：