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

Question

我有这个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 确认模式框？！

Answer 1

显然你应该在你的 html 代码中实现一个模态框。该模式应该有两个按钮（ok 和 cancel），具有独特的 id 属性（可能在 modal-footer div 内部）

# 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
});

您也可以尝试bootbox.js，而不是从头开始实现它，它使用引导模式来创建对话框。这将使您摆脱编写模态 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",
    },
  }
});