如何在超時時打開此模式？
[英]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.