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

Posted 2020-10-29 不落幕

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);