引导3 - 如何淡入警告框上单击并淡出后3秒单击

2023-09-13 02:34:29 作者:囙憶╰呮剰殇

我使用AngularJS和Bootstrap 3。我的web应用程序有一个更新按钮,它可以节省用户进行任何更改。当用户点击更新按钮,我想激活和淡入引导的警告框说:信息已保存,然后淡出后3秒。我不知道如何创建这个功能,可能需要一些帮助。

I am using AngularJS and Bootstrap 3. My web app has an "Update" button where it saves any changes the user makes. When the user clicks on the "Update" button, I want to activate and fade-in bootstrap's alert box saying "Information has been saved" and then fade-out after 3 seconds. I don't know how to create this function and may need some help..

更新:

我决定用这种方式:

HTML

<button type="button" class="btn btn-info" ng-click="save()">Update</button>

<div id = "alert_placeholder"></div>

JavaScript的

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秒钟后取出,但我不知道如何使它与code我有工作。

I would like to make the alert box fade-in when it first appears and fade-out as it gets removed after 3 seconds, but I am not sure how to make it work with the code I have.

推荐答案

我用这样的事情。 (动画看起来非常pretty!)。只需添加这个JS,类闪存适用于要消失了每一个项目。 确保还可以添加淡入类的一切!的淡入类带有引导。它会在5秒内淡出。

I use something like this. (The animation looks very pretty!). Simply add this JS, and apply the class flash to every item you want to disappear. MAKE SURE YOU ALSO ADD THE fade-in CLASS TO EVERYTHING! The fade-in class comes with bootstrap. It will fade out in 5 seconds.

window.setTimeout(function() {
  $(".flash").fadeTo(500, 0).slideUp(500, function(){
      $(this).remove();
  });
}, 5000);
 
精彩推荐
图片推荐