再次單擊時，啟動警報不起作用
[英]Bootstrap alert not working when clicked again
問題描述
面臨一個非常愚蠢的問題。 我在單擊按鈕時顯示警報消息。 第一次點擊時效果最佳，但隨后的點擊則無效，
這是我的代碼： http : //jsfiddle.net/nre6fbm5/
HTML
<body>
<div class="container">
<h2>Dismissal Alert Messages</h2>
<button>Send Message</button>
<div class="alert alert-danger fade alert-conatiner">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> Error! Can not proceed.
</div>
</div>
</body>
JS
$(document).ready(function() {
$('button').click(function() {
$(".alert").delay(1000).addClass("in").fadeOut(4000);
})
});
提前致謝！
4 個解決方案
解決方案1
3 已采納 2018-03-12 08:18:33
一串解決方案：
$(".alert").delay(1000).addClass("in").toggle(true).fadeOut(4000);
編輯：為什么它只能工作一次的問題是該display: none fadeout功能未添加display: none fadeout 。 .toggle(true)會將display屬性設置為在淡出觸發前立即阻止。 進一步了解：
此處的工作代碼： http : //jsfiddle.net/hxxjgh63/
解決方案2
1 2018-03-12 08:12:19
希望有幫助，您必須刪除“ in”類。
淡出后，第二件事：style =“ display：none”自動添加到“ .alert”中。 將此設置為空
$(document).ready(function() {
$('button').click(function() {
$(".alert").delay(1000).addClass("in").fadeOut(4000);
setTimeout(function(){
$(".alert").removeClass("in").css('display','');
},5500);
})
});
解決方案3
1 2018-03-12 08:18:47
in類不足以顯示alert下一次，因為它設置display: none ，你需要設置fadeIn為您設置fadeOut
$(document).ready(function() {
$('button').click(function() {
$(".alert").fadeIn().addClass('in').delay(4000).promise().done(function(){
$(this).removeClass("in").fadeOut();
});
})
});
解決方案4
1 2018-03-12 08:23:46
設置duration后，您還可以傳遞有關fadeOut效果的回調
$(document).ready(function() {
$('button').click(function() {
$(".alert").delay(1000).addClass("in").fadeOut(4000, function(){
$(".alert").removeClass("in").show();
});
})
});
在引導程序雙列表框中單擊選項時如何提醒彈出窗口？
[英]How do I alert a popup when an option is clicked in the bootstrap duallistbox?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.