마스크 layer_javascript 기술을 통해 플로팅 레이어 DIV 로그인을 구현하는 Node.js 코드

이에 대해서는 더 이상 할 말이 없습니다. . 코드로 이동하세요! !

첫 번째는 HTML 코드입니다. 여기에는 로그인 클릭 버튼과 간단한 로그인 상자가 포함되어 있습니다.

코드 복사 코드는 다음과 같습니다.

>

로그인

아무것도 작동하지 않습니다. . .


아무것도 작동하지 않습니다. . .


아무것도 작동하지 않습니다. . .


아무것도 작동하지 않습니다. . .








;

type="text" name="userName" />



인증 코드 ：

사용자 로그인

사용자 이름:

JS 스크립트 코드 구현




코드 복사

코드는 다음과 같습니다.

var Shade = document.getElementById("shade"); shade.style.width = ShadeWidth "px"

shade.style.height "px" ;

shade.style.display = "block";

var loginDivWidth = 200;
var loginDivHeight =

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 = "차단"
}


여기에는 마스크 레이어와 로그인 상자를 표시하는 코드만 있습니다. 숨겨진 코드도 매우 간단합니다. 마스크 레이어(shade)의 DIV 블록과 로그인 상자(login)의 DIV 블록의 표시 속성을 없음으로 설정하면 문제가 없습니다. .

이 시점에서 마스크 레이어를 통해 플로팅 레이어 DIV 로그인을 구현하는 간단한 기능이 구현되었습니다. 예술 작품에 관해서는 모두가 스스로 처리합니다.


여기에는 모두에게 도움이 되는 기능이 있습니다. . 팝업 로그인 상자의 DIV 블록을 스크롤 막대와 함께 이동시키는 방법은 무엇입니까? ?

제 실험 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

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;

안타깝게도 실패했습니다. . 온라인에서 많이 검색했지만 그 중 어느 것도 요구 사항을 충족하지 못했습니다. 대부분 이는 setInterval을 설정하여 달성됩니다. 나는 이것이 이상적이지 않다고 생각합니다. . .

모든 위대한 신들의 조언을 부탁드립니다!