javascript - 在物化模式打开 3 秒后，如何使用 javascript 打开新的 html

Question

我正在创建一个“登录”页面，一旦用户按下登录按钮，就会出现一个模式，显示“登录成功”。我想要它做的是，模式出现 3 秒后，它会自动打开我的 profile.html 页面。

我正在使用 Materialise 模态。

这是我到目前为止的代码:

<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>

我已经有了 Materialize javascript 来运行模态:

$(文档).ready(函数(){ $('.modal').modal(); });

但我需要能够在模式运行后打开 profile.html。 任何想法或链接或其他设置方法将不胜感激。

Answer 1

Bootstrap 模式有 events 。您可以使用 shown_bs_modal 事件。

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

  // Wait 3 seconds
  setTimeout(function() {

    window.location.href = 'url_of_your_profile_page';

  }, 3000);
});

显示模式后，等待 3 秒钟，然后导航到您的个人资料页面网址。

编辑:由于您似乎使用的是物化模态而不是引导模态，因此这是一个新版本。 Materialise 模态有一个 onOpenEnd 事件。

$('.modal').modal({

  onOpenEnd: function() {

    // Wait 3 seconds
    setTimeout(function() {

      window.location.href = 'url_of_your_profile_page';

    }, 3000);
  }
});

该库的早期版本显然使用 ready 而不是 onOpenEnd。请参阅documentation获取最新版本。

概念验证示例:显示模式后触发警报。

$(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>