确认动态jQuery删除行的删除框

Question

我有这个jQuery函数用于使用Ajax从MySQL中删除行数据。这与jQuery确认，但我需要在删除行之前添加Bootstrap 3模式框确认（是/否）。

     function deleteBox(id){
  if (confirm("Are you sure you want to delete this record?"))
  {
    var dataString = 'id='+ id;
    $("#flash_"+id).show();
    $("#flash_"+id).fadeIn(1000).html('<img src="../img/select2-spinner.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

                               // Delete with slide up effect
                               $("#list_"+id).slideUp(600);

                    }else{
                         var errorMessage=result.substring(position+2);
                         alert(errorMessage);
                    }
                  }
            }
        });
     }
}

HTML：

<div class="box-body">
    <ul class="todo-list ui-sortable">
        <li class="list" id="list_3">   <span class="handle"><i class="fa icon-ellipsis-vertical icon-large"></i> <i class="fa icon-ellipsis-vertical icon-large"></i></span>
    <span class="tools"><a href="javascript:void()"><i alt="Delete" title="Delete" class="icon-remove-sign icon-large" onclick=deleteBox("3")></i>delete</a></span>
title/sedcription <span class="flash" id="flash_3"></span>
    <small class="label label-success pull-right"><i class="icon-time"></i>date</small>

        </li>
        <li class="list" id="list_5">   <span class="handle"><i class="fa icon-ellipsis-vertical icon-large"></i> <i class="fa icon-ellipsis-vertical icon-large"></i></span>
    <span class="tools"><a href="javascript:void()"><i alt="Delete" title="Delete" class="icon-remove-sign icon-large" onclick=deleteBox("5")></i>delete</a></span>
 title/sedcription <span class="flash" id="flash_5"></span>
    <small class="label label-success pull-right"><i class="icon-time"></i>date</small>

        </li>
    </ul>
</div>

如何为此功能添加bootstrap 3确认模式框？！

演示fiddle