The principle of using the div popup to animate content is to use CSS and HTML to hide the contents of the pop-up window first, and then use JavaScript (jquery in this tutorial) to dynamically display them. This effect not only can make full use of the limited layout space, but also can improve the user experience; More importantly, it does not affect the SEO effect (because it actually exists in the page, but initially it is not visible)
1, in the HTML page to define a Div, and in the DIV implementation we need to show the content.
Copy Code code as follows:
<body>
<div id= "Login" >
<form id= "LoginForm" >
<div class= "Info" ></div>
<div class= "User" > Account number: <input type= "text" name= "user" class= "text"/></div>
<div class= "Pass" > Password: <input type= "password" name= "Access" class= "text"/></div>
<div class= "button" ><input type= "button" Name= "sub" class= "Submit" value= ""/></div>
</form>
<div class= "Other" > Sign up for new users | Forgot your password? </div>
</div>
</body>
A picture is worth thousands of words. Let's take a look at this div popup effect screenshot:
2, I used the CSS style
Copy Code code as follows:
#login {
width:350px;
height:250px;
border:1px solid #ccc;
Position:absolute;
Display:block;
z-index:9999;
Background: #fff;
}
#login H2 {
height:40px;
line-height:40px;
Text-align:center;
font-size:14px;
letter-spacing:1px;
Color: #666;
Background:url (images/login_header.png) repeat-x;
margin:0;
padding:0;
border-bottom:1px solid #ccc;
Cursor:move;
}
#login h2 img {
Float:right;
position:relative;
top:14px;
right:8px;
Cursor:pointer;
}
#login Div.info {
padding:10px 0 5px 0;
Text-align:center;
Color:maroon;
}
#login Div.user, #login div.pass {
font-size:14px;
Color: #666;
padding:5px 0;
Text-align:center;
}
#login Input.text {
width:200px;
height:25px;
border:1px solid #ccc;
Background: #fff;
font-size:14px;
}
#login. button {
Text-align:center;
padding:15px 0;
}
#login Input.submit {
width:107px;
height:30px;
Background:url (images/login_button.png) no-repeat;
Border:none;
Cursor:pointer;
}
#login. Other {
Text-align:right;
padding:15px 10px;
Color: #666;
}
This is mainly about the definition of div style, because we need to center the use of absolute positioning Position:absolute, second, because it is the pop-up layer, div must be at the outermost, so usually set z-index very large, here we set to Z-index : 9999; There is also a point about the div itself is hidden need to set for Display:none, but here we need to see the effect directly so that it shows the use of Display:block;
3, we need to let it center display, then must first get the height and width of the browser, if there is a scroll bar horizontal or vertical offset, you need to get that length, by calculating the location of the div should be the browser.
Copy Code code as follows:
$ (document). Ready (function ()
{
JQuery.fn.extend ({
Center:function (Width,height)
{
Return $ (a). CSS ("left", ($ (window). Width ()-width)/2+$ (window). ScrollLeft ()).
CSS ("Top", ($ (window). Height ()-height)/2+$ (window). scrolltop ()).
CSS ("width", width).
CSS ("height", height);
}
});
});
Let it show by clicking the button
Copy Code code as follows:
$ (". Login"). Click (Function ()
{
$ ("#login"). Show (). Center (350,250);//Display landing box
});
Effect chart
4, Can the pop-up box to drag
Code implementation
Copy Code code as follows:
$ (document). Ready (function ()
{
JQuery.fn.extend ({
Drag and drop function
Drag:function () {
var $tar = $ (this);
return $ (this). MouseDown (function (e) {
if (E.target.tagname = = "H2") {
var diffx = e.clientx-$tar. Offset (). Left;
var diffy = e.clienty-$tar. Offset (). Top;
$ (document). MouseMove (function (e) {
var left = E.CLIENTX-DIFFX;
var top = E.clienty-diffy;
if (left < 0) {
left = 0;
}
else if (left <= $ (window). ScrollLeft ()) {
left = $ (window). scrollleft ();
}
else if (Left > $ (window). Width () +$ (window). ScrollLeft ()-$tar. Width ()) {
left = $ (window). Width () +$ (window). ScrollLeft ()-$tar. Width ();
}
if (Top < 0) {
top = 0;
}
else if (Top <= $ (window). scrolltop ()) {
Top = $ (window). scrolltop ();
}
else if (Top > $ (Window). Height () +$ (window). scrolltop ()-$tar. Height ()) {
Top = $ (window). Height () +$ (window). scrolltop ()-$tar. Height ();
}
$tar. CSS ("left", left + ' px '). CSS ("top", top + ' px ');
});
}
$ (document). MouseUp (function () {
$ (this). Unbind ("MouseMove");
$ (this). Unbind ("MouseUp")
});
});
}
});
});
Here we only click on the H2 elements in the div content to drag and drop, if you need a global div can be modified, drag and drop principle: When the mouse on the specified elements of the press, get the mouse point coordinates, through the calculation, the picture also moved to the corresponding position, once the mouse click Cancel, the corresponding press event will also be canceled, The page is still.
Call drag-and-drop method
Copy Code code as follows:
Now we can click on the title bar of the pop-up box to drag it in the browser.
