CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Vadim Novozhilov
Vadim Novozhilov

Reputation: 855

Bootstrap 3 - show only one modal at given moment

I have following code to invoke my newsletter modal:

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

I use setTimeout to invoke it after 10 seconds user visited site, but if he for example opens login modal, after 10 seconds he will see newsletter modal and I don't want such behavior. So far I triend checking if login modal is open like this:

$(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 it didn't work. Also I tried to check if #loginModal has class in and it didn't work too. What am I doing wrong in this case?

Upvotes: 1

Views: 1137

Answers (3)

Bourbia Brahim
Bourbia Brahim

Reputation: 14712

declare global variable , then affect the setTimoutOut to it

if the user try to login just clear that timeout by using clearTimeout js dunction

it should be like : var timeOut;

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

when click to show modal login do 

clearTimeout(timeOut)

please see below snippet 

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>

Otherwise if you still want to check with css , just check if the login modal has in classe . see bewlo snippet 

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>

Upvotes: 1

Wordica
Wordica

Reputation: 2595

Simplest way, check if modal has class "open" or "opended", I'm not sure which class is added for displayed modal:

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

}

and put this in interval

Upvotes: 1

Planetary Dev
Planetary Dev

Reputation: 51

You should check the display-style from the modal instead.

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

Upvotes: 1

Related Questions