可能重复:
Notification alert similar to how stackoverflow functions
通知栏顶部,显示“你赢得xyz徽章”之类的内容。 怎么做?我正在尝试在我的rails应用程序中创建类似的东西。我使用蓝图作为我的布局,它是标准的单列950px布局,从标题到页脚的所有内容都在容器div中。
答案 0 :(得分:8)
使用z-index比页面上任何其他元素更高的固定位置元素,您可以非常轻松地完成此任务:
<div id="notification">
You've earned xyz badge
</div>
<!-- rest of your site's markup -->
使用以下CSS:
#notification {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: yellow;
}
如果您需要创建并显示#notification
,那么只需检查页面加载:
$(window).load(function(){
if(showNotification){
$('body').append(
$('<div id="notification">You\'ve earned xyz badge</div>');
);
}
});