[英]How do I open this modal on timeout?
I am creating a modal with CSS and HTML, but want to load it after 3 seconds on page load using jquery. 我正在使用CSS和HTML创建模态,但要在使用jQuery在页面加载3秒后加载它。 I am having a hard time finding the right event handler for this. 我很难为此找到合适的事件处理程序。 What is the best way to do this? 做这个的最好方式是什么?
Modal below 下面的模态
<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 使用Javascript
window.onload = () => {
setTimeout(() => {
console.log('time');
}, 3000);
}
Here you go with a solution https://jsfiddle.net/7pgrzp7d/ 在这里您可以找到解决方案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);
}
Hope this will help you. 希望这会帮助你。
Making a few assumptions, I have hidden the modal via css (inline like your code), then after 3 seconds made it appear: 做出一些假设,我通过css(像您的代码一样内联)隐藏了模式,然后在3秒钟后使其出现:
https://jsfiddle.net/pv7j5qdt/ 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>
Well I added a class hidden
and added it to the modal. 好吧,我添加了一个hidden
的类并将其添加到模态中。 Property is a display:none;
属性是一个display:none;
. 。 After 3 seconds I just remove this by using show()
: 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.