Of Stack

Through the mask layer to achieve floating layer DIV login js code

  • 2020-03-30 01:39:29
  • OfStack
There's nothing more to say about that. Directly on the code!!

The first is the HTML code. It contains a login click button and a crude login box. 

 
<body> 
<div id="shade"></div> 
<div> 
<a onclick="login()" style="cursor:pointer"> The login </a> 
</div> 
<br/> 
 Nothing works... <br/><br/> 
 Nothing works... <br/><br/> 
 Nothing works... <br/><br/> 
 Nothing works... <br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><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"> 
<table width="200"> 
<caption> 
 The user login  
</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><img alt="" src="base/verify.html" onClick=""></td> 
</tr> 
<tr> 
<td><input type="submit" value=" The login " /></td> 
<td><input type="button" value=" cancel " onClick="cancel()" /></td> 
</tr> 
</table> 
</form> 
</div> 
</body>

Next is the implementation of JS script code 
 
<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 loginDivWidth = 200; 
var loginDivHeight = 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>

There is only the code that shows the mask layer and the login box. As for the hidden code, it should be fine to set the display property of the shade DIV block and the login DIV block to none.

At this point, a simple mask layer through the floating layer DIV login function is achieved. About the art work is up to everyone to solve.


Here, there is a function to help you. How w to make the DIV block of the popup login box follow the scroll bar?

My experiment 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 of them on the Internet, but they didn't meet the requirements. Most of this is done by setting a setInterval. I don't think it's ideal...

Please teach me!
Related articles: