javascript - 在物化模式打开 3 秒后,如何使用 javascript 打开新的 html
问题描述
我正在创建一个“登录”页面,并且我拥有它,这样一旦用户按下登录按钮,就会出现一个显示“登录成功”的模式。我想要它做的是,在模式出现 3 秒后,它会自动打开我的 profile.html 页面。
我正在使用物化模态。
这是我到目前为止的代码:
<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 来运行模式:
$(document).ready(function(){
$('.modal').modal();
});
但我需要能够在模式运行后打开 profile.html。任何想法或链接或其他设置方法将不胜感激。
解决方案
引导模式有事件。您可以使用该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 秒钟,然后导航到您的个人资料页面网址。
编辑:您似乎使用的是物化模态而不是引导模态,这是一个新版本。物化模态有一个onOpenEnd
事件。
$('.modal').modal({
onOpenEnd: function() {
// Wait 3 seconds
setTimeout(function() {
window.location.href = 'url_of_your_profile_page';
}, 3000);
}
});
该库的早期版本显然使用ready
而不是onOpenEnd
. 请参阅最新版本的文档。
概念证明示例:显示模式后触发警报。
$(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>
推荐阅读
- neo4j - 查找与查询不匹配的节点
- node.js - loader.js:800 抛出错误:node.js
- android - SQLite 错误:单击时没有这样的列 ListView
- visual-studio-code - 关闭编辑器后,Visual Studio 命令行快捷方式不存在
- javascript - Vuetifyjs 通过降低高度来单独设置文本字段样式不起作用
- xml - XSLT - 添加一个 XML 节点作为标题
- python - setup.py如何打包一个纯数据文件项目?
- function - Golang 在编写函数闭包时会自动将变量分配为参数吗?
- java - 手动构建的 eclipse 插件似乎没有在目标中更新
- git - 无法在 pythonanywhere 中进行 git clone -- 权限被拒绝(公钥)