순수 js_javascript 기술을 활용한 마스크 레이어 효과 원리 분석

이전의 "Snake"를 이해한 후에는 이 기능이 처음에 상상했던 난이도와는 많이 다르다고 할 수 있습니다. 물론 이 방법은 약간 까다롭지만 결국에는 기능을 달성했습니다. . 정리

1. 구현 원리

본 글의 구현 원리는 다음과 같습니다.

* 사실 팝업 레이어는, 마스크 레이어와 원본 페이지 표시는 세 가지 div로 나뉩니다.

* 팝업 레이어의 레벨은 마스크 레이어 위에 있고, 마스크 레이어의 레벨은 원본 페이지 표시 위에 있습니다.

* 마스크 레이어에는 투명 효과가 있습니다

* 마스크 레이어는 실질적인 의미가 없으므로 html 부분에 작성할 필요는 없습니다. 물론 작성으로도 가능합니다.

2. 코드 구현

html 언어는 다음과 같습니다.

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

....

div id="alert" style="display:none;">

로그인

;input type="password">

Javascript는 팝업 레이어와 마스크 레이어를 구현합니다. >

코드 복사

코드는 다음과 같습니다. function show(){ var AlertPart=document.getElementById("alert"); alertPart.style.display="block";

alertPart.style.position = "absolute";

alertPart.style.top = "50%";
alertPart.style.left = "50%";
AlertPart.style.marginTop = "-75px"
alertPart.style.marginLeft = "-150px";
alertPart.style.width="300px" ;
alertPart.style.height="200px"; style.zIndex = "501";

var mybg = document.createElement("div")
mybg.setAttribute("id","mybg")
= "#000";
mybg.style.width = "100%";
mybg.style.height = "100%";
mybg.style.position = "절대"; mybg.style.top = "0";
mybg.style.left = "0";
mybg.style.zIndex = "500"
mybg.style.opacity = "0.3"; 🎜>mybg.style.filter = "알파(불투명도=30)";
document.body.appendChild(mybg)

document.body.style.overflow = "숨김"; }



여기서 Z-색인은 수준, 불투명도 및 필터를 구분하는 데 사용됩니다. 알파(불투명도=) 투명도, document.createElement("div ")와 document.body.appendChild()는 모두 이전에 나타나고 적용되었기 때문에 이를 달성할 수 있습니다. 실제로 원리를 이해하는 순간 모든 것이 훨씬 쉬워질 것입니다.

길은 멀고도 멀다.