Use JQuery to create QQ pop-up messages that comply with Web standards_jquery

The pop-up message mentioned here refers to the kind of frame that rises and falls in the lower right corner of the web page. The custom animation of jQuery is used here. It feels like this custom animation is like the shape and gradient animation in flash. , as long as the two key frames of the beginning and the end are defined, the animation process in the middle will be completed automatically. You don’t need to know jQuery to check the jQuery help document.

The basic idea is this: The first pop-up message box is actually a div layer. After the page is loaded, we should position the div layer below the lower right corner of the page through CSS. , and hide it, and then when we click the button on the page, the animation function is triggered, and the div layer begins to rise from bottom to top. Here, in order to increase the visual sense, we have a transparency gradient during the rising process, and then the div layer There is a close button in the layer. When clicked, another animation function is triggered, and the div layer goes down. That's it. After thinking about the idea, I officially start writing the code. The following is the source code of my test.html:

Copy code The code is as follows:

 

 
 
     
     
     
     
 
 
   

 
   

 
     
   

 
   

 
   

 
   

 
        有新用户注册 
        关闭 
   

 
 

The above code has been tested and it works. However, if you test it in multiple browsers, you will see that the effect is the same in IE6, IE7, IE8B2, OPERA, and CHROME browsers. , but when you test it in Firefox, you will find that the animation should be from bottom to top, but now it is from top to bottom. Why is it like this???
After verification by myself, And with the help of the teacher, the problem was finally solved:

The key to this problem is that Firefox uses html as the root element of the page, while IE uses body as the root element. You set the body to 1800px high, but in Firefox, the height of the html element is still 0, so your div#pop actually starts at the top.

The modification method is very simple, just add a CSS setting:

html{
height:100%;
}

In this way, at the beginning, the height of the html fills the browser window, and the pop will go to the bottom. The effect is exactly the same as in IE.

So when doing JS, CSS is a very important foundation. You must understand CSS very clearly.

The following is the final source code:

Copy the code The code is as follows:

 

 
 
     
     
     
     
 
 
   

 
   

 
     
   

 
   

 
   

 
   

 
        有新用户注册 
        关闭