打開后如何關閉引導程序模式？

Question

我有一個項目，並且我正在使用引導程序模態，所以我的模態必須自動打開，到目前為止還不錯，然后打開，我想在10或30秒后關閉它，怎么辦？

$(function(){
  setTimeout(function(e){
    var delayModal = $(e).parents(".modal").attr("data-delay");
     $('#memberModal').modal('show');
  }, parseInt(delayModal)*1000);

});

但是它可以使用此功能，但是它不是動態地可以幫助我做我想做的嗎？ 並使用settimeout自動關閉？ 我要學習怎么做

 $(function(){ setTimeout(function(e){ $('#memberModal').modal('show'); }, parseInt(5)*1000); }); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="modal fade" id="memberModal" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel" aria-hidden="true" data-delay="5"> <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> <h4 class="modal-title" id="memberModalLabel">Thank you for signing in!</h4> </div> <div class="modal-body"> <p>However the account provided is not known. <BR> If you just got invited to the group, please wait for a day to have the database synchronized.</p> <p>You will now be shown the Demo site.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

Answer 1

打開模態后，只需在超時中添加$('#memberModal').modal('hide') 。

 $(function(){ setTimeout(function(e){ $('#memberModal').modal('show'); }, parseInt($('#memberModal').attr('data-open')) * 1000); setTimeout(function(e){ $('#memberModal').modal('hide'); }, parseInt($('#memberModal').attr('data-delay')) * 1000); }); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="modal fade" id="memberModal" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel" aria-hidden="true" data-delay="6" data-open="2"> <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> <h4 class="modal-title" id="memberModalLabel">Thank you for signing in!</h4> </div> <div class="modal-body"> <p>However the account provided is not known. <BR> If you just got invited to the group, please wait for a day to have the database synchronized.</p> <p>You will now be shown the Demo site.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

Answer 2

您可以像這樣動態地進行

 $(function(){ var delayModal = $(".modal").attr("data-delay"); setTimeout(function(e){ $('#memberModal').modal('show'); }, parseInt(delayModal)*1000); }); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="modal fade" id="memberModal" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel" aria-hidden="true" data-delay="5"> <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> <h4 class="modal-title" id="memberModalLabel">Thank you for signing in!</h4> </div> <div class="modal-body"> <p>However the account provided is not known. <BR> If you just got invited to the group, please wait for a day to have the database synchronized.</p> <p>You will now be shown the Demo site.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

Answer 3

自動化顯示和隱藏模態

 $(function(){ var modal = $('#memberModal'); var showDelay = parseInt(modal.data('delay')); var closeDelay = parseInt(modal.data('close')); var openByTimeout = false; setTimeout(function(e){ openByTimeout = true; modal.modal('show'); }, showDelay*1000); modal.on('show.bs.modal', function () { if (openByTimeout) { setTimeout(function(e){ openByTimeout = false; modal.modal('hide'); }, closeDelay*1000); } }); }); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="modal fade" id="memberModal" data-delay="1" data-close="2" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel" aria-hidden="true"> <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> <h4 class="modal-title" id="memberModalLabel">Thank you for signing in!</h4> </div> <div class="modal-body"> <p>However the account provided is not known. <BR> If you just got invited to the group, please wait for a day to have the database synchronized.</p> <p>You will now be shown the Demo site.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>