That's nothing to say .. Code directly !!
The first is the HTML code. The button and a simple logon box are provided.
Copy codeThe Code is as follows:
<Body>
<Div id = "shade"> </div>
<Div>
<A onclick = "login ()" style = "cursor: pointer"> logon </a>
</Div>
<Br/>
Nothing... <Br/>
Nothing... <Br/>
Nothing... <Br/>
Nothing... <Br/>
<Br/> <br/> <br/>
<Br/> <br/> <br/>
<Div id = "login" style = "display: none; z-index: 1025; position: absolute;">
<Form method = "post" action = "user/login.html">
& Lt; table width = "200" & gt;
<Caption>
User Logon
</Caption>
<Tr>
<Td> User name: </td>
<Td> <input type = "text" name = "userName"/> </td>
</Tr>
<Tr>
<Td> password: </td>
<Td> <input type = "password" name = "password"/> </td>
</Tr>
<Tr>
<Td> Verification Code: </td>
<Td> </td>
</Tr>
<Tr>
<Td> <input type = "submit" value = "Logon"/> </td>
<Td> <input type = "button" value = "cancel" onClick = "cancel ()"/> </td>
</Tr>
</Table>
</Form>
</Div>
</Body>
Next is the implementation of JS script code.
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Function login (){
Var shadeWidth = document. body. clientWidth + 30;
Var shadeHeight = document. body. clientHeight + 30;
Var shade = document. getElementById ("shade ");
Shade. style. width = shadeWidth + "px ";
Shade. style. height = shadeHeight + "px ";
Shade. style. display = "block ";
Var logindigo width = 200;
Var logindigo Height = 800;
Var loginDiv = document. getElementById ("login ");
LoginDiv. style. width = loginDivWidth + "px ";
LoginDiv. style. height = loginDivHeight + "px ";
LoginDiv. style. top = (document. body. scrollTop + document. body. clientHeight/2
-LoginDivHeight/2) + "px ";
LoginDiv. style. left = (document. body. scrollLeft + document. body. clientWidth/2
-LoginDivWidth/2) + "px ";
LoginDiv. style. display = "block ";
}
</Script>
Only the codes of the mask layer and logon box are displayed. As for the hidden code, it is also very simple, that is, the DIV block of the mask layer (shade) and the login) set the display attribute of the DIV block to none ..
So far, a simple function of implementing the DIV login function on the floating layer through the mask layer is implemented. We will solve all the work on the art.
Here, we have a function to help you .. Is how to move the DIV block in the pop-up logon box following the scroll bar ??
My experiment code is as follows.
Copy codeThe Code is as follows:
Function loginDivCenter (){
LoginDiv. style. top = (document. body. scrollTop + document. body. clientHeight/2
-LoginDivHeight/2) + "px ";
LoginDiv. style. left = (document. body. scrollLeft + document. body. clientWidth/2
-LoginDivWidth/2) + "px ";
}
Function scall (){
LoginDivCenter ();
}
Window. onscroll = scall;
Window. onresize = scall;
Window. onload = scall;
But unfortunately, I failed .. I found a lot on the Internet, but none of them meet the requirements. Most of them are implemented by setting a setInterval. I think this is not ideal...
Please advise me!