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

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

1 个答案: