Jq制作的页面顶部动态弹出的提示框,可以用于提示信息的显示以及通知信息的显示。
rush:xhtml;">
Jq顶部弹出框关闭">X
Css代码
rush: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代码
rush:js;">
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
rush:css;">
JS
rush:js;">
HTML
rush:xhtml;">
<div class="demo"><a class="action" href="javascript:void(0);">jquery float浮动层弹出层页面加载特效
<div class="overlay">
<div class="destroy">
<div class="sheet">
<div class="head">