bootstrap刪除模態框彈出並詢問是否刪除【通用刪除模態框】

普通的詢問是否刪除的對話框比較low，可以利用bootstrap的模態框代替普通的對話框來實現刪除。

 

效果:

　　點刪除的時候彈出模態框詢問是否刪除，點確認的時候將需要刪除的ID傳到后台進行刪除。

 

 

 

 過程:

1.界面准備刪除模態框:

　　模態框中隱藏需要刪除的ID

                            <!-- 模態框   信息刪除確認 -->
                            <div class="modal fade" id="delcfmOverhaul">
                                <div class="modal-dialog">
                                    <div class="modal-content message_align">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal"
                                                aria-label="Close">
                                                <span aria-hidden="true">×</span>
                                            </button>
                                            <h4 class="modal-title">提示</h4>
                                        </div>
                                        <div class="modal-body">
                                            <!-- 隱藏需要刪除的id -->
                                            <input type="hidden" id="deleteHaulId" />
                                            <p>您確認要刪除該條信息嗎？</p>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default"
                                                data-dismiss="modal">取消</button>
                                            <button type="button" class="btn btn-primary"
                                                id="deleteHaulBtn">確認</button>
                                        </div>
                                    </div>
                                    <!-- /.modal-content -->
                                </div>
                                <!-- /.modal-dialog -->

 

 

 

 2.刪除按鈕:

 

<a href="javascript:void(0)" onclick="showDeleteModal(this)">刪除</a>

 

 

結構:

 

 

3. 刪除按鈕點擊事件:

　　根據傳下來的obj獲取到ID並設置到刪除模態框中的隱藏域，同時打開詢問是否刪除的模態框

// 打開詢問是否刪除的模態框並設置需要刪除的大修的ID
function showDeleteModal(obj) {
    var $tds = $(obj).parent().parent().children();// 獲取到所有列
    var delete_id = $($tds[0]).children("input").val();// 獲取隱藏的ID
    $("#deleteHaulId").val(delete_id);// 將模態框中需要刪除的大修的ID設為需要刪除的ID
    $("#delcfmOverhaul").modal({
        backdrop : 'static',
        keyboard : false
    });
}

 

 

 4. 刪除模態框確定按鈕的點擊事件

 　　獲取到隱藏域的ID並傳到后台進行刪除，刪除成功重新加載頁面

function deleteHaulinfo() {
    alert("你即將刪除的大修ID" + $("#deleteHaulId").val())
}

$(function() {
// 刪除大修模態框的確定按鈕的點擊事件
$("#deleteHaulBtn").click(function() {
// ajax異步刪除
deleteHaulinfo();
});

});