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>

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();
                    }
  • 12
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值