jq制作的页面顶部动态弹出的提示框，可以用于提示信息的显示以及通知信息的显示。
html代码
jq顶部弹出框x

css代码
body { margin: 0; padding: 0;}.tooltiptop { width: 100%; height: 50px; margin-top:-50px; display:none;}.tooltiptop .bg { width: 100%; background-color: #333; height: 50px; opacity: .7; position: absolute; margin: 0;}.tooltiptop .main { width: 100%; position: absolute; margin: 0; height: 50px; line-height: 50px; text-align: center; color: #fff;}.tooltiptop .main span { float: right; color: #fff; margin-right: 20px; cursor: pointer;}
jq代码
var tooltiptop={ show:function(msg){ $(.tooltiptop .main i).html(msg); $(.tooltiptop).css(display,block).animate({margintop:0px},500); }, hide:function(){ $(.tooltiptop).animate({margintop:-50px},500,function(){$(this).css(display,none)}); }}
再给大家分享一例特效，效果也非常不错
css

js

html
jquery float浮动层弹出层页面加载特效
jquery顶部动画弹出层