In diesem Kapitel wird auf eine Schaltfläche eingerichtet, um ein zentriertes Fenster zu erzielen, und dieses Fenster hat einen durchscheinenden Maskierungsschicht -Effekt. . Der unten eingeführte Code kann diese kleine Schwägerin einfach implementieren.
Der Code ist wie folgt:
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<meta charset = "utf-8">
<meta name = "Autor" content = "http://www.softwhy.com/"/>
<title> Ant Tribe </title>
<style type = "text/css">
#verblassen {
Anzeige: Keine;
Position: absolut;
Top: 0%;
Links: 0%;
Breite: 100%;
Höhe: 100%;
Hintergrundfarbe: Schwarz;
Z-Index: 1001;
-moz-opacity: 0,8;
Deckkraft: .80;
Filter: Alpha (Opazität = 80);
}
#Licht{
Anzeige: Keine;
Position: absolut;
Top: 25%;
Links: 25%;
Breite: 50%;
Höhe: 50%;
Polsterung: 16px;
Grenze: 3px fest orange;
Hintergrundfarbe: weiß;
Z-Index: 1002;
Überlauf: Auto;
}
</style>
<script type = "text/javaScript">
window.onload = function () {
var linkBt = document.getElementById ("linkBt");
var light = document.getElementById ('Light');
var fade = document.getElementById ('fade');
var closeBt = document.GetElementById ("CLODBT");
linkBt.onclick = function () {
Light.Style.Display = 'Block';
fade.style.display = 'block';
}
closeBt.onclick = function () {
light.style.display = 'none';
fade.style.display = 'none';
}
}
</script>
</head>
<body>
<a href = "JavaScript: void (0)" id = "linkBt"> Klicken Sie hier, um das Fenster zu öffnen </a>
<div id = "light"> <a href = "javaScript: void (0)" id = "closeBt"> Fenster Schließen </a> </div>
<div id = "fade" "> </div>
</body>
</html>
Der obige Code implementiert unsere Anforderungen, und der folgende Einführung führt kurz seinen Implementierungsprozess ein.
1. Implementierungsprinzip:
Standardmäßig sind die Maskenebene und das Fenster versteckt und unsichtbar. Beide Elemente verwenden die absolute Positionierung und setzen den Z-Index-Attributwert des zentrierten Fensters so, dass sie größer als die Maskenebene ist, sodass er auf der Maskenschicht abgedeckt werden kann. Wenn die Schaltfläche Schließen geklickt wird, kann die Maskenebene und das Fenster versteckt werden und das Prinzip ist ungefähr gleich.