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




免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM