이전 "뱀"을 이해 한 후에이 기능은 처음에 상상했던 것보다 훨씬 덜 어렵다고 말할 수 있습니다. 물론,이 방법은 까다로운 것으로 의심되며 궁극적으로 기능이 구현되었습니다. 분석하고 구성합시다.
1. 구현 원리
이 기사의 구현 원리는 다음과 같습니다.
* 실제로 팝업 레이어, 마스크 레이어 및 원래 페이지 디스플레이는 각각 세 가지 DIV입니다.
* 팝업 레이어의 레벨은 마스크 레이어 위에 있으며 마스크 레이어의 레벨은 원래 페이지 디스플레이 위에 있습니다.
* 마스크 층은 명확한 효과가 있습니다
* 마스크 층은 실제적인 의미가 없으므로 HTML 부분에 기록 할 필요가 없습니다. 물론 글을 쓰고 나서도 실현할 수 있습니다.
2. 코드 구현
HTML 언어는 다음과 같습니다.
코드 사본은 다음과 같습니다.
<html>
.... ....
<body>
<centre>
<div> <입력 유형 = "버튼"value = "go"onclick = "show ()"> </div>
<div id = "alert"style = "display : none;">
<양식>
로그인하십시오
<입력 유형 = "텍스트"> <입력 유형 = "비밀번호"> <input type = "value ="login ">
</form>
</div>
</센터>
</body>
</html>
JavaScript는 팝업 레이어 및 마스크 레이어를 구현합니다.
코드 사본은 다음과 같습니다.
<span style = "font-size : 12px;"> function show () {
var alertPart = document.getElementById ( "Alert");
AlertPart.style.display = "Block";
AlertPart.style.position = "절대";
AlertPart.style.top = "50%";
AlertPart.style.left = "50%";
AlertPart.style.margintop = "-75px";
AlertPart.style.marginleft = "-150px";
AlertPart.style.background = "Cyan";
AlertPart.style.width = "300px";
AlertPart.style.height = "200px";
AlertPart.style.zindex = "501";
var mybg = document.createElement ( "div");
mybg.setattribute ( "id", "mybg");
mybg.style.background = "#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 = "alpha (불투명도 = 30)";
document.body.appendChild (MYBG);
document.body.style.overflow = "숨겨진";
}
</script> </span>
여기서는 z-index를 사용하여 계층 구조, 불투명도 및 필터를 구별합니다. Alpha (불투명도 =) 투명성, Document.createElement ( "div") 및 Document.body.appendChild ()는 모두 이전에 사용되므로 달성 할 수 있습니다. 실제로 원칙이 이해되면 모든 것이 훨씬 쉬워집니다.
길은 길고 힘들다