我正在使用 AngularJS 和 Bootstrap 3。我的网络应用程序有一个“更新”按钮,用于保存用户所做的任何更改。当用户单击“更新”按钮时,我想激活并淡入 Bootstrap 的警告框,提示“信息已保存”,然后在 3 秒后淡出。我不知道如何创建此功能,可能需要一些帮助..
更新:
我决定使用这种方法:
HTML
<button type="button" class="btn btn-info" ng-click="save()">Update</button>
<div id = "alert_placeholder"></div>
JavaScript
$scope.save = function() {
$('#alert_placeholder').html('<div class="alert alert-warning alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><span>Your information has been updated.</span></div>')
setTimeout(function() {
$("div.alert").remove();
}, 3000);
}
我想让警告框在第一次出现时淡入并在 3 秒后消失,但我不确定如何使用我的代码使其工作。
最佳答案
我用的是这样的。 (动画看起来很漂亮!)。只需添加此 JS,并将类 flash
应用于您想要消失的每个元素。 确保您还添加了 fade-in
类到所有内容! fade-in
类带有 Bootstrap 。它将在 5 秒内淡出。
window.setTimeout(function() {
$(".flash").fadeTo(500, 0).slideUp(500, function(){
$(this).remove();
});
}, 5000);
关于javascript - Bootstrap 3 - 如何在点击时淡入警告框并在 3 秒后淡出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22138967/