打开后如何关闭引导程序模式？

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>