Modal框弹出后,2s自动消失

1、html代码(bootstrap组件)
<!--modal提示信息-->
<div class="modal fade" id="showModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<i class="fa fa-info-circle" style="color:#337ab7;" aria-hidden="true"></i><span class="modal-title" id="modalTitle">&nbsp;提示信息</span>
</div>
<div class="modal-body">
<span id="showMsg"></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
2、modal出现时,伴随这有如下变化:
  (1)body上会多出一个modal-open的class;
  (2)页面底部会多出一个class为modal-backdrop的div;
  (3)modal自身有一个动画效果,即class = 'fade in';
  若想自动让其消失,且背景暗色也消失并带有淡出的动画效果,可以参考以下方式:
function hideModal(){
 $('#showModal').removeClass('in').addClass('out');
$('.modal-backdrop').remove();
$('body').removeClass('modal-open');
}

setTimeout(hideModal,2000);



转载于:https://www.cnblogs.com/wuting/p/8677768.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值