Home > Developer > JavaScript
Use the mask layer to implement js Code for DIV logon on the floating layer
The mask layer achieves the DIV login effect on the floating layer. Many of you may have encountered it. The implementation is also very simple. Below is a good implementation. You can feel it.
That's nothing to say .. Code directly !!
The first is the HTML code. The button and a simple logon box are provided.
The 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.
The 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.
The 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!
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
