javascript – Bootstrap 3 – 如何淡入警报框,点击并在3秒后淡出

前端之家收集整理的这篇文章主要介绍了javascript – Bootstrap 3 – 如何淡入警报框,点击并在3秒后淡出前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用AngularJS和Bootstrap 3.我的Web应用程序有一个“更新”按钮,用于保存用户所做的任何更改.当用户点击“更新”按钮时,我想激活并淡入自举的警报框,说“信息已保存”,然后在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">&times;</button><span>Your information has been updated.</span></div>')
    setTimeout(function() {
        $("div.alert").remove();
    },3000);
}

我希望在第一次出现时使警报框淡入淡出,并在3秒后将其删除,但我不知道如何使其与我的代码一起使用.

解决方法

我用的是这样的东西. (动画看起来很漂亮!).只需添加此JS,并将类flash应用于您想要消失的每个项目.请确保您还将淡入课程添加到一切!淡入课程附带引导程序.它将在5秒内淡出.
window.setTimeout(function() {
  $(".flash").fadeTo(500,0).slideUp(500,function(){
      $(this).remove();
  });
},5000);

猜你在找的JavaScript相关文章