Bootstrap警报自动关闭

本文介绍了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>

解决方案

$ 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); });

Fiddle