1. 程式人生 > >bootstrap刪除模態框彈出並詢問是否刪除【通用刪除模態框】

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

cnblogs iss 是否 png con btn ima 點擊 void

  

  普通的詢問是否刪除的對話框比較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();
});

});

 

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