search

Home >Web Front-end >JS Tutorial >js code to implement floating layer DIV login through mask layer_javascript skills

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

WBOY
WBOYOriginal
2016-05-16 17:01:201091browse

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/>

























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!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Convert js numbers to float, take N decimal places_javascript skillsNext article：Convert js numbers to float, take N decimal places_javascript skills

Related articles

See more