jQuery 是否有一个插件可以显示“消息栏”?就像 Twitter 的“密码错误”一样屏幕顶部的栏?
Twitter会在屏幕顶部弹出一个消息栏,说“密码错误”,10秒后,它会向上滑动并消失。 Chrome 也使用这种方式显示“是否要保存密码”消息框。
jQuery 已经有一个插件可以做到这一点吗?它也适用于 IE 6 吗?因为通常情况下,相对于视口的显示(使用 position:fixed
)在 IE 6 上不起作用。谢谢。
更新:感谢很好的解决方案 - 我故意希望它能够工作(1)即使用户向下滚动页面,它也会显示在窗口屏幕的顶部和(2)该栏可能会选择显示在窗口屏幕的底部(作为一个选项)...如果它可以在 IE 6 上运行,那就更好了...现在可怜的程序员...
Twitter will pop down a message bar at the top of the screen say "Wrong password" and after 10 seconds, it will slide up and disappear. Chrome also shows "Do you want to save the password" message box using such a way.
Does jQuery have a plug in to do that already? Does it also work in IE 6? Because usually, the display of relative to the viewport (using position: fixed
) will not work on IE 6. thanks.
Update: thanks for the nice solutions -- I deliberately wanted it to work (1) even when the user has scrolled down the page, that it will show at the top of the window screen and (2) the bar might be chosen to display at the bottom of window screen instead (as an option)... and if it works on IE 6 then it is even better... poor programmers nowadays...
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您只需几行代码即可完成此操作,如下所示:
然后只需为您使用的类提供一些样式,例如:
您可以在此处查看工作演示,根据需要进行调整:) 这会动态创建一个
,将其添加到正文的顶部,因此没有时髦的定位不用担心,这在 IE6 中应该没问题。完成后,它将向上滑动并删除它创建的
进行清理。无论您需要什么,您都可以添加点击处理程序以立即将其删除等。
You can do this with just a few lines of code, like this:
Then just give the class you use some styling, for example:
You can view a working demo here, tweak as needed :) This creates a
<div>
on the fly, adds it to the top of the body, so no funky positioning to worry about, this should be just fine in IE6. When it's finished it'll slideUp and remove the<div>
it created to cleanup. You can add a click handler to remove it instantly, etc, whatever your needs are.好吧,我尝试了一下,想出了这个不错的功能:
[ http://jsfiddle.net/2arVf/< 上的实时示例/a> ]
示例:
CSS:
HTML:
Well I played around and came up with this nice function:
[ live example on http://jsfiddle.net/2arVf/ ]
Example:
CSS:
HTML: