如何在超时时打开此模式？
[英]How do I open this modal on timeout?
问题描述
我正在使用CSS和HTML创建模态，但要在使用jQuery在页面加载3秒后加载它。 我很难为此找到合适的事件处理程序。 做这个的最好方式是什么？
下面的模态
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
</head>
<body>
<span id="about" class="target"></span>
<div class="modal">
<div class="content" style="height: 425px; width: 425px;">
<h2 style="margin-bottom: 30px;margin-top: 50px;">Welcome back!</h2>
<p style="margin-bottom: 0px;margin-top: 0px;">You left something in your cart.</p>
<p style="margin-bottom: 43px; margin-top: 0px;"> Check out today!</p>
<a class="close-btn" href="#start">X</a>
<button class="cart-button" style="width: 189px;height: 49px;">
View Cart</button>
</div>
</div>
<div class="page-container">
<p><a href="#about">Open Modal Window</a>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
使用Javascript
window.onload = () => {
setTimeout(() => {
console.log('time');
}, 3000);
}
3 个解决方案
解决方案1
1 已采纳 2017-08-30 14:48:18
在这里您可以找到解决方案https://jsfiddle.net/7pgrzp7d/
setTimeout(function(){ $('.modal').modal({show:true}); }, 3000);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <span id="about" class="target"></span> <div class="modal"> <div class="content" style="height: 425px; width: 425px;"> <h2 style="margin-bottom: 30px;margin-top: 50px;">Welcome back!</h2> <p style="margin-bottom: 0px;margin-top: 0px;">You left something in your cart.</p> <p style="margin-bottom: 43px; margin-top: 0px;"> Check out today!</p> <a class="close-btn" href="#start">X</a> <button class="cart-button" style="width: 189px;height: 49px;"> View Cart</button> </div> </div> <div class="page-container"> <p><a href="#about">Open Modal Window</a> </div>
window.onload = () => {
setTimeout(() => {
$('.modal').modal({show:true});
}, 3000);
}
希望这会帮助你。
解决方案2
1 2017-08-30 14:48:40
做出一些假设，我通过css（像您的代码一样内联）隐藏了模式，然后在3秒钟后使其出现：
https://jsfiddle.net/pv7j5qdt/
$(document).ready(function() { setTimeout(function(){ $('.modal').show(); }, 3000); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span id="about" class="target"></span> <div class="modal" style="display: none;"> <div class="content" style="height: 425px; width: 425px;"> <h2 style="margin-bottom: 30px;margin-top: 50px;">Welcome back!</h2> <p style="margin-bottom: 0px;margin-top: 0px;">You left something in your cart.</p> <p style="margin-bottom: 43px; margin-top: 0px;"> Check out today!</p> <a class="close-btn" href="#start">X</a> <button class="cart-button" style="width: 189px;height: 49px;"> View Cart</button> </div> </div> <div class="page-container"> <p><a href="#about">Open Modal Window</a> </div>
解决方案3
0 2017-08-30 14:49:51
好吧，我添加了一个hidden的类并将其添加到模态中。 属性是一个display:none; 。 3秒后，我只是使用show()将其删除：
window.onload = () => { setTimeout(() => { $('div.modal').show(); }, 3000); }
.hidden{ display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span id="about" class="target"></span> <div class="modal hidden"> <div class="content" style="height: 425px; width: 425px;"> <h2 style="margin-bottom: 30px;margin-top: 50px;">Welcome back!</h2> <p style="margin-bottom: 0px;margin-top: 0px;">You left something in your cart.</p> <p style="margin-bottom: 43px; margin-top: 0px;"> Check out today!</p> <a class="close-btn" href="#start">X</a> <button class="cart-button" style="width: 189px;height: 49px;"> View Cart</button> </div> </div> <div class="page-container"> <p><a href="#about">Open Modal Window</a> </div>
当我打开模态视图时，标题图像出现在模态的前面，如何停止它？
[英]When I open the modal view, the header image appears in front of modal, how do I stop this?
如何从每个页面中的导航栏组件的按钮打开模态/对话框反应
[英]How do I open a modal/ dialog from a button from nav bar component in every page react
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.