This article mainly introduces the use of jquery to produce web-standard QQ pop-up messages. The pop-up message here refers to the kind of box that rises and goes down in the lower-right corner of the page, where jquery's custom animation is used.
The pop-up message here refers to the kind of box that rises and goes down in the lower right corner of the page, using jquery's Custom animation, this custom animation is like the shape and gradient animation in Flash, as long as the first and last two keyframes are defined, the middle of the animation process will be completed automatically, You don't have to have jquery to check out the jquery help document. . Basic idea is this: first pop-up message box is actually a div layer, the page after loading we should be through CSS to position the div layer to the bottom right corner of the page, and hide him, And then when we click on the button in the page, we trigger the animation function, the div layer begins to rise from the bottom up, where we are in order to increase the sense of vision, in the process of increasing the transparency of the gradient, and then the DIV layer has a close button, click and then trigger another animation function, div layer down, that's all, Thought well after the formal start of the code to write work, the following is my test.html source code: the following: <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head runat=" Server "> & nbsp <title>qq popup </title> <style type= "Text/css" > # pop{ width:250px; height:150px; border:1px solid #fcc; &NBSP; Background-color:yellow; Position:absolute; right:16px; bottom: -150px; Display:none; { </style> <script src= " Jquery.min.js "type=" Text/javascript "></script> <script type=" Text/javascript "> & nbsp $ (document). Ready (function () { $ ("#pop"). CSS (" Opacity ", 0); $ ("#btn"). Click (fun); $ ("#cloPop"). Click (fun2); }); function fun () { /* pop-up box from bottom to top slowlyarising, which also includes the change of transparency * * $ ("#pop"). CSS ("Display", "block"); $ ("#pop"). Animate { bottom: "16px", & nbsp Opacity:1 },1000 { function fun2 () { /* eject box down from top down/&NB sp; $ ("#pop"). CSS ("Display", "block"); $ ("#pop"). Animate { bottom: " -150px", , opacity:0 &NBSP },1000); { </script> </head> <body Style= "height:1800px;" > <form id= "Form1" runat= "Server" > <div> ; Input type= "button" value= "Slowly rising Window" id= "btn"/> <div id= "Mes" ></div> &N Bsp </div> </form> <div id= "Pop" > &NBS P <a href= "http://g.cn" target= "_blank" > New user Registration </a> <a id= "Clopop" href= " # "> Close </a> </div> </body> </html> The above code has been tested and is effective. However, if you put in a number of browsers in the test can be seen in the Ie6,ie7,ie8b2,opera,chrome browser, the effect is the same, but when you put the test in Firefox, you will find that the animation should be from the bottom up, but now it is from the top down , why is this so???? By myself to verify, and with the help of the teacher, and finally solve the problem: The crux of this problem is that Firefox is HTML as the root element of the page, and IE toThe body is 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 starting from the top. Modify the method is very simple, add a CSS settings can: html{ height:100%; } So, at the beginning , the HTML is full of browser window, the pop on the end, the effect and in IE is exactly the same. So engage in js,css is very important basis, we must make the CSS very clear. Below is the final source: code as follows: <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head runat=" Server "> & nbsp <title>qq popup </title> <style type= "Text/css" > html{ & nbsp height:100%; } #pop { &NBSP ; width:250px; height:150px; &NBSP border:1px solid #fcc; Background-color:yellow; Position:absolute; right:16px; bottom: -150px; Display:none; { </style> <script src= " Jquery.min.js "type=" Text/javascript "></script> <script type=" Text/javascript "> & nbsp $ (document). Ready (function () { $ ("#pop"). CSS (" Opacity ", 0); $ ("#btn"). Click (fun); $ ("#cloPop"). Click (fun2); }); &NBSP; Function fun () { /* pop-up rises slowly from bottom up, which also includes transparency changes/ &NBSP ; $ ("#pop"). CSS ("Display", "block"); $ ("#pop"). Animate { bottom: "16px", & nbsp Opacity:1 },1000 { function fun2 () { /* pop-up box Down from the top down. */ $ ("#pop"). CSS ("Display", "block"); $ ("#pop"). Animate { bottom: " -150px", , &nbsP opacity:0 },1000 { </script> </head> <body Style= "height:1800px;" > <form id= "Form1" runat= "Server" > <div> ; Input type= "button" value= "Slowly rising Window" id= "btn"/> <div id= "Mes" ></div> &N Bsp </div> </form> <div id= "Pop" > &NBS P <a href= "http://g.cn" target= "_blank" > New user Registration </a> <a id= "Clopop" href= " # "> Off </a> </div> </body> </html> Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
