打开后如何关闭bootstrap模式？

Question

我有一个项目，我正在使用bootstrap模式，我的模态必须自动打开它的okey到目前为止然后打开我要在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')。

＆＃13;

＆＃13;

$(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);
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以像这样动态地做到这一点

＆＃13;

＆＃13;

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

});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>