In diesem Artikel wird die Methode beschrieben, einen grau-schwarzen Maskeneffekt mit vollem Bildschirm durch JS+CSS aufzunehmen. Teilen Sie es für Ihre Referenz. Die spezifische Analyse ist wie folgt:
Auf vielen Websites gibt es solche Auswirkungen. Nach der Durchführung einer bestimmten Operation wird eine grauschwarze durchscheinende Maske angezeigt. Der angegebene Inhalt kann darauf betrieben werden, z. B. ein Anmeldungsfeld und andere Inhalte. Führen Sie vor, wie Sie diesen Effekt erzielen können. Das Codebeispiel lautet wie folgt:
Kopieren Sie den Code wie folgt: <! DocType html>
<html>
<kopf>
<meta charset = "utf-8">
<meta name = "Autor" content = "// www.vevb.com/"/>
<titels> So tauchen Sie einen grau-schwarz-transparenten Maskeneffekt mit Vollbildmasken auf-wulin.com </title>
<style type = "text/css">
*
{
Rand: 0px;
Polsterung: 0px;
}
.zhezhao
{
Breite: 100%;
Höhe: 100%;
Hintergrundfarbe:#000;
Filter: Alpha (Opazität = 50);
-moz-opacity: 0,5;
Deckkraft: 0,5;
Position: absolut;
links: 0px;
Oben: 0px;
Anzeige: Keine;
Z-Index: 1000;
}
.Login
{
Breite: 280px;
Höhe: 180px;
Position: absolut;
Top: 200px;
Links: 50%;
Hintergrundfarbe:#000;
Rand-Links: -140px;
Anzeige: Keine;
Z-Index: 1500;
}
.Inhalt
{
Rand: 50px;
Farbe: Rot;
Zeilenhöhe: 200px;
Höhe: 200px;
Text-Align: Mitte;
}
</style>
<script type = "text/javaScript">
window.onload = function ()
{
var zhezhao = document.getElementById ("zhezhao");
var login = document.getElementById ("Login");
var bt = document.getElementById ("bt");
var btclose = document.getElementById ("btclose");
bt.onclick = function ()
{
zhezhao.style.display = "block";
login.style.display = "block";
}
btclose.onclick = function ())
{
zhezhao.style.display = "none";
login.style.display = "Keine";
}
}
</script>
</head>
<body>
<div id = "zhezhao"> </div>
<div id = "login"> <button id = "btclose"> klicken, um </button> </div> zu schließen.
<div> wulin.com begrüßt Sie, <Button id = "bt"> klicken, um die Maske </button> </div> zu popup -up -up
</body>
</html>
Die obigen implementiert die Grundmaskenfunktion. Beim Klicken auf die Maske wird ein Objekt angezeigt. Beim Klicken zum Schließen verschwindet der Maskeneffekt. Hier erfahren Sie, wie Sie den Effekt erreichen können:
Implementierungsprinzip:
Erstellen Sie ein Vollbild-DIV unter Verwendung der absoluten Positionierung, damit sie vom Dokumentstrom getrennt werden kann, ohne andere Elemente zu beeinflussen, und setzen Sie sie auf einen durchscheinenden Zustand. Natürlich kann diese Transparenz nach Belieben eingestellt werden und ein Anmeldeelement erstellen, das auch die absolute Positionierung verwendet und den Z-Index-Attributwert größer als der DIV auf dem Bildschirm macht, und wird zu diesem Zeitpunkt nicht von der Div-Bildschirm-DIV abgedeckt. Im Standardzustand ist der Anzeigeattributwert dieser beiden Divs keine. Beim Klicken auf die entsprechende Schaltfläche können sie ihren Anzeigeattributwert ändern.
Vorschlag: Handgeschriebener Code so weit wie möglich kann die Lerneffizienz und -tiefe effektiv verbessern.
Ich hoffe, dieser Artikel wird für die Webprogrammierung aller hilfreich sein.