Jq制作的页面顶部动态弹出的提示框,可以用于提示信息的显示以及通知信息的显示。
Html代码
Jq制作的页面顶部动态弹出的提示框,可以用于提示信息的显示以及通知信息的显示。
Html代码
Css代码
Jq代码
再给大家分享一例特效,效果也非常不错
CSS
position:fixed;z-index:9999999;top:0;right:0;left:0;height:38px;border-bottom:1px solid #e0dede;width:100%;
background-color:#F7F7F7;
background-image:linear-gradient(#fff,#f7f6f5);
background-image:-moz-linear-gradient(#fff,#f7f6f5);
background-image:-o-linear-gradient(#fff,#f7f6f5);
background-image:-webkit-linear-gradient(#fff,#f7f6f5);
box-shadow:inset 0 1px #fff,0 1px 3px rgba(34,25,0.4);
-moz-box-shadow:inset 0 1px #fff,0 1px 2px rgba(34,0.4);
-webkit-box-shadow:inset 0 1px #fff,0.4);
}
html,html body{background-image:url(about:blank);background-attachment:fixed;}
*html #Header{position:absolute;top:expression(eval(document.documentElement.scrollTop));}
.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:998;width:100%;height:100%;background:#f6f4f5;display:none;}
html,html body{background-image:url(about:blank);background-attachment:fixed;}
html .destroy,html .overlay{position:absolute;top:expression(eval(document.documentElement.scrollTop));}
.destroy{position:fixed;top:0px;left:50%;margin-left:-425px;*margin-left:-718px;_margin-left:-425px;margin-top:-292px;z-index:99996;opacity:0;filter:alpha(opacity=0);}
.sheet{position:relative;width:840px;height:290px;margin:auto;padding:0;background:#fff9e2 url("images/tips_bg.gif");
box-shadow:inset 0 -1px 0 #FFF,0 1px 6px rgba(0,.3);
-moz-box-shadow:inset 0 -1px 0 #FFF,.3);
-webkit-box-shadow:inset 0 -1px 0 #FFF,.3);
border-bottom:2px solid #efebda;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
-moz-border-bottom-left-radius:5px;
-moz-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
}
.sheet a.close{display:block;position:absolute;width:20px;height:20px;right:5px;top:5px;background:url("images/sheet_close.gif") no-repeat;}
.sheet a:hover.close{background-position:0 -30px;}
.sheet a:active.close{background-position:0 -60px;}
.sheet .head{padding:20px 15px;border-bottom:1px solid #f6f4ee;}
.sheet .head h2{padding:0;font-size:18px;font-weight:400;color:#444;text-align:center;}
.sheet .body{padding:10px 15px;border-top:1px solid #fff;}
JS
HTML
<div class="demo"><a class="action" href="javascript:void(0);">jquery float浮动层弹出层页面加载特效
<div class="overlay">
<div class="destroy">
<div class="sheet">
<div class="head">
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。