js code to implement floating layer DIV login through mask layer_javascript skills

There's nothing more to say about this. . Just go to the code! !

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

Copy code The code is as follows:

< div id="shade">

Login

Nothing works. . .


Nothing works. . .


Nothing works. . .


Nothing works. . .















< ;br/>















< br/>

User login

Username:	< input type="text" name="userName" />
Password:
Verification code ：

Then comes the implementation of JS script code

Copy code The code is as follows:

Here is only the code to display the mask layer and login box. As for the hidden code, it is also very simple. Just set the display attribute of the DIV block of the mask layer (shade) and the DIV block of the login box (login) to none, and there should be no problem. .

At this point, a simple function of realizing floating layer DIV login through the mask layer has been implemented. Regarding the art work, everyone will take care of it themselves.


Here, there is a function to help everyone. . How to make the DIV block of the pop-up login box move with the scroll bar? ?

My experimental code is as follows.

Copy code 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 searched a lot online, but none of them met the requirements. Mostly this is achieved by setting a setInterval. I think this is not ideal. . .

Please give me advice from all the great gods!