Bootstrap 利用模态框显示alert(提示)的最简单方法_bootstrap alert弹窗

思路：将alert放到模态框内，利用调用alert的api使用模态框

1.alert放在模态框内

            <!-- 添加成功提示 -->
            <div class="modal fade" id="add-success" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-body">
                        <div class="alert alert-success" role="alert">
                            添加成功!
                        </div>
                    </div>
                </div>
            </div>
            <!-- 添加失败提示 -->
            <div class="modal fade" id="add-error" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-body">
                        <div class="alert alert-danger" role="alert">
                            {{ addInfo.error_message }}
                        </div>
                    </div>
                </div>
            </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2.调用模态框

  if (resp.error_message !== "success") {
		addInfo.error_message = resp.error_message;
		// 打开添加失败模态框
		var myModal = new Modal(document.getElementById('add-error'));
		myModal.show();
		//定时关闭
		setTimeout(function () {
		myModal.hide();
		}, 1000)
		} else {
		Modal.getInstance("#add-info-bnt").hide();
		// 打开添加成功模态框
		var myModals = new Modal(document.getElementById('add-success'));
		myModals.show();
		//定时关闭
		setTimeout(function () {
		myModals.hide();
		}, 1000)
		getAllInfo();
                    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20