打开后如何关闭引导模式？答案

【问题标题】：How can I close bootstrap modal after open?打开后如何关闭引导模式？
【发布时间】：2017-03-14 20:02:55
【问题描述】：

我有一个项目，我正在使用引导模式，我的模式必须自动打开它到目前为止还不错然后打开我想在 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>

【问题讨论】：

您对之前的回答满意吗？我有另一个想法如何在模态显示后开始计数
我想自动做，我想知道你的想法
您是否尝试过这里的答案：stackoverflow.com/questions/18730284/…
我知道该怎么做，但我不知道在使用 settimeout 打开我的模态后我将如何申请，因为我猜要使用多个 settimeout 来做到这一点

标签： javascript jquery twitter-bootstrap

【解决方案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>

【讨论】：

谢谢，这很好，但有什么办法可以自动完成吗？例如，我在 html 代码的顶部有 data-delay 属性，如果 data-delay 5 秒后打开 5 秒，我有 data-close 并且如果 10 秒后关闭 10 秒？
我已将答案更新为现在读取data-delay 属性。
不，我的意思是在我的 html 上添加 data-xxx 属性，如果我的值 5 比在 5 秒后打开，我将添加 data-close 属性，如果我的值 10 并在 10 秒后关闭。 .对不起我的英语
我添加了data-open，所以它现在会延迟这两个动作。对吗？
是的，你要向我学习如何在 js 中使用两个倍数，非常感谢，对不起我的英语不好:)

【解决方案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>

【讨论】：

这是我正在寻找的答案，非常感谢，我还有另一个问题。我想在打开后用 data-delay 之类的属性关闭它

【解决方案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>

【讨论】：