Jquery Implementation of the Top pop-up box special effect _ jquery-js tutorial

This article will share with you the floating pop-up layer on the top of jquery. Click the floating layer animation pop-up layer to show the animation sliding effect from the top. The effect is very good and we recommend it to you. 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

 
 
Jq Top pop-up boxX

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

JS