BUG記錄：Bootstrap模態對話框連續關閉黑屏

起因

在前端引入了bootstrap的模塊對話框，作爲消息提醒對話框。對話框產生兩次作用：第一次提示是否要執行操作，點擊確定後，隱藏對話框，調用ajax進行異步操作（同步出現的問題一樣）；第二次是ajax返回結果，重新彈出對話框，提示結果。代碼如下：

$(".app-modal-message").html("您確定要刪除這些數據麼？");
//判斷確定按鈕是否已綁定點擊事件，未綁定則綁定
let events = $._data($(".app-btn-save")[0], "events");
if (!events || !events["click"]) {
	//爲確定按鈕綁定事件，只綁定一次
    $(".app-btn-save").on("click", function () {
    	//第一次點擊確定，隱藏對話框
        $("#modal-default").modal("hide");
        //操作數不爲空，則只需ajax請求
        if (_ids !== "") {
            let ids = _ids;
            //操作數置空，避免點擊第二次點擊確定時，操作不爲空，進入死循環
            _ids = "";
            $.ajax({
                "url": "/user/deleteMulitbyId",
                "type": "POST",
                "data": {"ids": ids},
                "dataType": "JSON",
                "success": function (data) {
                	//成功則刷新當前頁
                    if (data.status === 200) {
                        window.location.reload();
                    } 
                    //否則彈出對話框提示錯誤信息
                    else {
                        $(".app-modal-message").html(data.message);
                        //此時顯示對話框，第二次點擊確定
                        $("#modal-default").modal("show");
                    }
                }
            });
        };
    });
}

問題

當第二次點擊確定按鈕後，對話框再次彈出，頁面背景變黑，如下圖：

分析

查看元素，可以發現HTML文件中多了下面幾行：

上面的div每彈出一次對話框產生一個。其作用是，在彈出對話框的時候，頁面暫時變半透明灰色，點擊確定或取消關閉對話框後，這個隨之消失。
現在對話框消失，div因爲兩次點擊確定而產生了兩次，但是沒有消失，導致頁面變黑，且無法響應（點組件無響應，因爲這個div是全屏的）。

解決

通過觀察對話框產生關閉的過程，發現這個div在消失時需要一點時間，而如果上個div沒有消失就立即現實對話框，就會馬上又生成一個div，並且這兩個div都不會消失。
所以只要在兩次點擊過程中增加一點兒延時，讓第一次產生的div有足夠的時間消失。代碼如下：

$(".app-modal-message").html("您確定要刪除這些數據麼？");
//判斷確定按鈕是否已綁定點擊事件，未綁定則綁定
let events = $._data($(".app-btn-save")[0], "events");
if (!events || !events["click"]) {
    $(".app-btn-save").on("click", function () {
        $("#modal-default").modal("hide");
        //增加500ms延時來消除背景`div`
        setTimeout(function () {
            if (_ids !== "") {
                let ids = _ids;
                _ids = "";
                $.ajax({
                    "url": "/user/deleteMulitbyId",
                    "type": "POST",
                    "data": {"ids": ids},
                    "dataType": "JSON",
                    "success": function (data) {
                        if (data.status !== 200) {
                            // window.location.reload();
                        } else {
                            $(".app-modal-message").html(data.message);
                            $("#modal-default").modal("show");
                        }
                    },
                    "failed": function (data) {
                        console.log(data);
                    }
                })
            }
       }, 500);
    });
}