Bootstrap警报自动关闭 [英] Bootstrap Alert Auto Close
本文介绍了Bootstrap警报自动关闭的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我需要在点击Add to Wishlist按钮时调用警报,并在2秒内消失警报。这就是我的尝试,但是一旦它出现,警报就会立即消失。不知道,错误在哪里..任何人都可以帮我解决问题吗?
JS脚本
$(document).ready(function(){
$(#success-alert)。hide();
$(#myWish)。click(function showAlert(){
$(#success-alert)。alert();
window.setTimeout(function(){
$(#success-alert)。alert 'close');},2000);
});
});
HTML代码:
< div class =product-options>
< a href =#class =btn btn-mini>购买< / a>
< / div>
Alert Box:
< div class =alert alert-successid =success-alert>
< strong>成功! < /强>
产品已添加到您的愿望清单。
< / div>
解决方案
$ b
$(#success-alert)。fadeTo(2000,500).slideUp(500,function(){
$( #success-alert)。slideUp(500);
});
My need is to call alert when I click on Add to Wishlist button and should disappear the alert in 2 secs. This is how I tried, but the alert is disappearing instantly as soon as it is appearing. Not sure, where the bug is.. Can anyone help me out?
JS Script
$(document).ready (function(){
$("#success-alert").hide();
$("#myWish").click(function showAlert() {
$("#success-alert").alert();
window.setTimeout(function () {
$("#success-alert").alert('close'); }, 2000);
});
});
HTML Code:
<div class="product-options">
<a id="myWish" href="" class="btn btn-mini" >Add to Wishlist </a>
<a href="#" class="btn btn-mini"> Purchase </a>
</div>
Alert Box:
<div class="alert alert-success" id="success-alert">
<button type="button" class="close" data-dismiss="alert">x</button>
<strong>Success! </strong>
Product have added to your wishlist.
</div>
解决方案
For a smooth slideup:
$("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
$("#success-alert").slideUp(500);
});
这篇关于Bootstrap警报自动关闭的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文