Mam następujący kod, aby wywołać mój modalny biuletyn:

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

Używam setTimeout, aby wywołać go po 10 sekund odwiedził witrynę użytkownika, ale jeśli na przykład otwiera modal logowania, po 10 sekundach zobaczy newsletter modal i nie chcę takich zachowań. Do tej pory Triend sprawdza, czy login modal jest otwarty w ten sposób:

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

Bit to nie zadziałało. Próbowałem też sprawdzić, czy #loginModal ma klasę in i nie działa też. Co robię źle w tym przypadku?

1
Vadim Novozhilov 25 czerwiec 2017, 14:06

3 odpowiedzi

Najlepsza odpowiedź

Zadeklarować zmienną globalną, a następnie wpłynąć na settimoutout

Jeśli użytkownik spróbuje się zalogować, wyczyść ten limit czasu za pomocą ClearTimeout JS Dunction

Powinien być taki jak: var timeout;

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

Po kliknięciu, aby wyświetlić login Modal

clearTimeout(timeOut)

Zobacz poniżej fragment

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>

W przeciwnym razie, jeśli nadal chcesz sprawdzić z CSS, sprawdź, czy modal logowania ma in classe. Zobacz Fragment 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>
2
Spring 25 czerwiec 2017, 11:34

Najprostszy sposób, sprawdź, czy modal ma klasę "Otwórz" lub "Ułączony", nie jestem pewien, która klasa jest dodawana dla wyświetlanych modalności:

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

}

I umieść to w przedziale

1
Wordica 25 czerwiec 2017, 11:24

Powinieneś zamiast tego sprawdzić styl wyświetlacza z modalnego.

$(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);
         }
    }
});
1
Planetary Dev 25 czerwiec 2017, 11:14