jquery - jQuery 是否有一个插件可以在屏幕顶部显示 "message bar"(如 Twitter "wrong password"栏)？

Question

Twitter会在屏幕顶部弹出一个消息栏，提示“密码错误”，10秒后，它会向上滑动并消失。 Chrome 也使用这种方式显示“是否要保存密码”消息框。

jQuery 是否已经有一个插件可以做到这一点？它也适用于 IE 6 吗？因为通常情况下，相对于视口(viewport)的显示(使用 position:fixed)在 IE 6 上不起作用。谢谢。

更新:感谢您提供了很好的解决方案 - 我故意希望它能够工作 (1) 即使用户向下滚动页面，它也会显示在窗口屏幕的顶部，并且(2) 该栏可能会选择显示在窗口屏幕的底部(作为一个选项)...如果它可以在 IE 6 上运行，那就更好了...现在可怜的程序员...

Answer 1

您只需几行代码即可完成此操作，如下所示:

​​​​function topBar(​​​message) {
  $("<div />", { 'class': 'topbar', text: message }).hide().prependTo("body")
      .slideDown('fast').delay(10000).slideUp(function() { $(this).remove(); });
}

然后只需为您使用的类提供一些样式，例如:

.topbar { 
    background: #990000; 
    border-bottom: solid 2px #EEE; 
    padding: 3px 0; 
    text-align: center; 
    color: white;
}​

You can view a working demo here ，根据需要进行调整:)这将创建一个 <div>动态地将其添加到主体的顶部，因此无需担心时髦的定位，这在 IE6 中应该没问题。完成后，它将向上滑动并删除 <div>它创建是为了清理。无论您需要什么，您都可以添加点击处理程序以立即将其删除等。