【问题标题】:How to close bootstrap alert automatically in Rails?如何在 Rails 中自动关闭引导警报?
【发布时间】:2014-07-19 21:09:36
【问题描述】:

所以我有一个使用引导程序的应用程序,它会在您登录、退出等时发出警报。

我无法在 5 秒内自动关闭此弹出窗口,我用来设置警报框样式的类是“.alert”和“.alert-info”。

我尝试将以下代码添加到 application.js:

window.setTimeout(function() {
    $(".alert alert-info").fadeTo(500, 0).slideUp(500, function(){
        $(this).remove(); 
    });
}, 5000);

除了在application.html.erb的一个脚本标签中添加它

 <script>
  window.setTimeout(function() {
    $(".alert alert-info").fadeTo(500, 0).slideUp(500, function(){
        $(this).remove(); 
    });
}, 5000);
    </script>

但它似乎仍然没有自动关闭,我做错了什么?

谢谢!

【问题讨论】:

    标签: javascript jquery ruby-on-rails twitter-bootstrap ruby-on-rails-4


    【解决方案1】:

    setTimeout() 方法在被调用后只会运行一次。照原样,您的 javascript 将在加载到 DOM 时执行,而不是在弹出框出现时执行。您应该将代码添加到显示弹出窗口的同一函数中,以便在显示弹出窗口 5 秒后运行。此外,如果你想选择一个同时具有 alert 和 alert-info 类样式的元素,你的 jQuery 选择器应该是 $(".alert.alert-info")。你应该只把你的 js 放在一个地方,不要在多个文件中重复相同的代码。这是不必要的,会导致意想不到的行为。您的最终代码应如下所示:

    setTimeout(function(){
        $(".alert.alert-info").fadeTo(500,0,function(){
            $(this).remove()
            })
        },5000)
    }    
    

    请记住将它放在您的代码中,以便在显示框时运行它,而不是在加载页面时运行。如果您想要自定义动画,请查看animate() 方法:http://api.jquery.com/animate/

    【讨论】:

      猜你喜欢
      • 2014-05-30
      • 2015-02-22
      • 2014-12-12
      • 2016-04-13
      • 2018-11-27
      • 2018-10-26
      • 1970-01-01
      • 1970-01-01
      • 2023-04-01
      相关资源
      最近更新 更多