JS-CSS-Methode zum Erzielen von Popup-Vollbild-Grau- und Schwarztransparentmaskeneffekten_Javascript-Fähigkeiten

Das Beispiel in diesem Artikel beschreibt die Methode zur Verwendung von js CSS, um einen transparenten Grau-Schwarz-Maskeneffekt im Vollbildmodus anzuzeigen. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Dieser Effekt ist auf vielen Websites zu finden. Nachdem ein bestimmter Vorgang ausgeführt wurde, wird eine grau-schwarze durchscheinende Maske angezeigt, auf der der angegebene Inhalt ausgeführt werden kann. Beispielsweise kann ein Anmeldefeld angezeigt werden So erzielen Sie diesen Effekt: Das Codebeispiel lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

Zum Schließen klicken

Script Home heißt Sie willkommen, Klicken Sie, um die Maske aufzurufen

Das Obige implementiert die grundlegende Maskenfunktion. Wenn Sie auf die Maske klicken, um sie zu öffnen, wird ein Objekt angezeigt. Wenn Sie darauf klicken, um sie zu schließen, verschwindet der Maskeneffekt. So erzielen Sie diesen Effekt:


Umsetzungsprinzip:


Erstellen Sie ein Vollbild-Div, verwenden Sie die absolute Positionierung, damit es vom Dokumentfluss getrennt werden kann und keine Auswirkungen auf andere Elemente hat, und stellen Sie es natürlich auf einen halbtransparenten Zustand ein wird ein Login-Element erstellen, das auch die absolute Positionierung verwendet und seinen Z-Index-Attributwert so festlegt, dass er größer als der Div auf dem Bildschirm ist. Zu diesem Zeitpunkt wird er nicht vom Vollbild-Div abgedeckt. Standardmäßig ist der Anzeigeattributwert dieser beiden Divs „none“. Ihre Anzeigeattributwerte können durch Klicken auf die entsprechenden Schaltflächen geändert werden.


Empfehlung:
Schreiben Sie Code so oft wie möglich von Hand, was die Lerneffizienz und -tiefe effektiv verbessern kann.

Ich hoffe, dass dieser Artikel für das Webprogrammierungsdesign aller hilfreich sein wird.