Question

我有以下代码来调用我的简报模式：

$(window).load(function(){
        if (sessionStorage.getItem("is_seen") === null) {
            setTimeout(function(){
                $('#newsletter_modal').modal('show');
                sessionStorage.setItem('is_seen', 1);
            }, 10000);
        }
    });

我使用setTimeout在用户访问网站10秒后调用它，但如果他打开登录模式，10秒后他会看到newsletter模态，我不想要这样行为。到目前为止，我试图检查login模态是否像这样打开：

$(window).load(function(){
    if($('#userModal').is(':visible')) {
         if (sessionStorage.getItem('is_seen') === null) {
             setTimeout(function(){
                $('#newsletter_modal').modal('show');
                sessionStorage.setItem('is_seen', 1);
            }, 10000);
         }
    }
});

它没有用。另外，我尝试检查#loginModal是否有in类，但它也没有用。在这种情况下，我做错了什么？

Answer 1

声明全局变量，然后影响setTimoutOut

如果用户尝试登录，只需使用clearTimeout js dunction

清除该超时

应该是这样的： var timeOut;

$(window).load(function(){
        if (sessionStorage.getItem("is_seen") === null) {
            timeOut = setTimeout(function(){
                $('#newsletter_modal').modal('show');
                sessionStorage.setItem('is_seen', 1);
            }, 10000);
        }
    });

点击显示模态登录时

clearTimeout(timeOut)

请参阅下面的代码段

var timeout;
$(window).load(function(){

    timeout = setTimeout(function(){
        $('#newsletter_modal').modal('show');
        
    }, 5000);
  
    $("#login").click(function(e){
      clearTimeout(timeout);
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" id="login" data-target="#myModal">login</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">login</h4>
        </div>
        <div class="modal-body">
          <p>Login modal</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
  
  <div class="modal fade" id="newsletter_modal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">newsletter</h4>
        </div>
        <div class="modal-body">
          <p>Some text in news letter.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
</div>

否则，如果您仍想查看css，只需检查登录模式是否有in classe。看到bewlo片段

var timeout;
$(window).load(function(){

    setTimeout(function(){
    
        if(!$("#loginModal").hasClass('in'))
          $('#newsletter_modal').modal('show');

    }, 5000);
    /*
    $("#login").click(function(e){
      clearTimeout(timeout);
    })*/
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" id="login" data-target="#loginModal">login</button>

  <!-- Modal -->
  <div class="modal fade" id="loginModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">login</h4>
        </div>
        <div class="modal-body">
          <p>Login modal</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
  
  <div class="modal fade" id="newsletter_modal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">newsletter</h4>
        </div>
        <div class="modal-body">
          <p>Some text in news letter.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
</div>

Answer 2

您应该从模态中检查显示样式。

$(window).load(function(){
    // if($('#userModal').is(':visible')) {
    if($('#userModal').css('display') == 'block') {
         if (sessionStorage.getItem('is_seen') === null) {
             setTimeout(function(){
                $('#newsletter_modal').modal('show');
                sessionStorage.setItem('is_seen', 1);
            }, 10000);
         }
    }
});

Answer 3

最简单的方法，检查模态是否有类＆＃34;打开＆＃34;或者＆＃34; opended＆＃34;，我不确定为显示的模态添加了哪个类：

if ( jQuery('.my_login_modal').hasClass('open') ) {
   //remove setTimeout or even remove modal by .hide() to be sure
   clearTimeout(timeOut);

}

并将其放入间隔

Bootstrap 3 - 在给定时刻仅显示一个模态

3 个答案: