How can I use javascript for opening a new html after a materialize modal has opened for 3 seconds

Question

I am creating a 'login' page, and I have it so that once the user presses the login button, a modal appears that says "Login Successful". What I want it to do, is after the modal appears for 3 seconds, it automatically opens up my profile.html page.

I'm using the Materialize Modals.

Here is the code I have so far:

<div class='row'>
  <div class='input-field col s12'>
    <input class='validate' type='email' name='email' id='txtEmail' />
    <label for='email'>Enter your email</label>
  </div>
</div>
<div class='row'>
  <div class='input-field col s12'>
    <input class='validate' type='password' name='password' id='txtPassword' />
    <label for='password'>Enter your password</label>
  </div>
</div>
<div class='row'>
  <div class="col s12">
    <button data-target="modal2" id="btnLogin" type='submit' class='col s12 btn startup modal-trigger'>Login</button>
  </div>
<!-- Login SUCCESS Modal Structure -->
<div id="modal2" class="modal">
  <div class="modal-content" id="modal2content">
    <div class="row">
      <div class="col s5 offset-s4">
        <i class="success large material-icons">check</i>
      </div>
   </div>
   <p class="success">Login Successful!</p>
 </div>

I already have the Materialize javascript to run the modal:

$(document).ready(function(){ $('.modal').modal(); });

But I need to be able to open profile.html after the modal has run. Any ideas or links or other ways to set it up would be appreciated.

Answer 1

Bootstrap modal has events. You can use the shown_bs_modal event.

$('.modal').on('shown.bs.modal', function(e) {

  // Wait 3 seconds
  setTimeout(function() {

    window.location.href = 'url_of_your_profile_page';

  }, 3000);
});

Once the modal is shown, wait 3 seconds then navigate to your profile page url.

Edit: As it seems you are using materialize modals and not bootstrap modals, here is a new version. Materialize modals have a onOpenEnd event.

$('.modal').modal({

  onOpenEnd: function() {

    // Wait 3 seconds
    setTimeout(function() {

      window.location.href = 'url_of_your_profile_page';

    }, 3000);
  }
});

Earlier versions of the library were apparently using ready instead of onOpenEnd. See the documentation for the latest version.

Proof of concept example: fire an alert once the modal has been shown.

$(document).ready(function() {

  $('.modal').modal({
  
    onOpenEnd: function() {
    
      alert('modal has opened');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

<!-- Modal Structure -->
<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>A bunch of text</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
  </div>
</div>