Jquery implements special effects in the pop-up box at the top, and jquery Special Effects

Jquery implements special effects in the pop-up box at the top, and jquery Special Effects

A prompt box pops up at the top of the page created by Jq, which can be used to display the prompt information and notification information.

Html code

<Div class = "tooltiptop"> <div class = "bg"> </div> <div class = "main"> <I> Jq Top pop-up box </I> <span onClick = "ToolTipTop. hide (); "title =" close "> X </span> </div>

Css code

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 code

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")});  }}

I would like to share with you an example of special effects, which is also very good.

CSS

<Style type = "text/css"> * {margin: 0; padding: 0; list-style-type: none;} a, img {border: 0 ;}. demo {margin: 0 auto 0 auto; padding: 200px 0 0 0; width: 400px; text-align: center; font-size: 18px ;}. demo. action {color: # 3366cc; text-decoration: none; font-family: "", "" ;}# Header {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, 25, 0.4);-moz-box-shadow: inset 0 1px # fff, 0 1px 2px rgba (34,25, 25, 0.4);-webkit-box-shadow: inset 0 1px # fff, 0 1px 3px rgba (0.4, 25,);} * html, * html body {background-image: url (about: blank); background-attachment: fixed;} * html # Header {position: absolute; top: expression(eval(document.doc umentElement. 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.doc umentElement. scrollTop ));}. destroy {position: fixed; top: 0px; left: 50%; margin-left:-margin PX; * margin-left:-718px; _ margin-left:-margin PX; 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, 0, 0 ,. 3);-moz-box-shadow: inset 0-1px 0 # FFF, 0 1px 6px rgba (0, 0, 0 ,. 3);-webkit-box-shadow: inset 0-1px 0 # FFF, 0 1px 6px rgba (0, 0, 0 ,. 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. 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 ;}</style>

JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script><script type="text/javascript">$(document).ready(function(){  var h = $(document).height(); $(".overlay").css({"height": h });   $(".action").click(function(){  $(".overlay").css({'display':'block'}).animate({'opacity':'0.8'});  $(".destroy").stop(true).animate({'margin-top':'40px','opacity':'1'},400);  });  $(".close").click(function(){  $(".destroy").stop(true).animate({'margin-top':'-292px','opacity':'0'},800); $(".overlay").css({'display':'none'}).animate({'opacity':'0'});  }); });</script>

HTML

<Div id = "Header"> </div> <div class = "demo"> <a class = "action" href = "javascript: void (0 ); "> jquery float floating layer pop-up layer page loading effects </a> </div> <div class =" overlay "> </div> <div class =" destroy "> <div class = "sheet"> <div class = "head">