js implementiert das Popup-Anmeldefeld durch Klicken auf das Popup-Fenster
|
In diesem Artikel wird der spezifische Code von js zur Realisierung des Popup-Anmeldefelds beim Klicken auf das Popup-Fenster zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt 1 Bildvorschau
2 index.html-Code
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<title>js Klicken Sie auf das Popup-Fenster, um den Code des Anmeldefelds anzuzeigen</title>
</Kopf>
<Text>
<Stil>
*{
Rand: 0;
Polsterung: 0;
}
Taste, Eingabe{
Umriss: keiner;
}
Schaltfläche, .login{
Breite: 120px;
Höhe: 42px;
Hintergrund: #f40;
Farbe: #fff;
Rand: keiner;
Rahmenradius: 6px;
Anzeige: Block;
Rand: 20px automatisch;
Cursor: Zeiger;
}
.popOutBg{
Breite: 100 %;
Höhe: 100 %;
Position: fest;
links: 0;
oben: 0;
Hintergrund: rgba (0,0,0,.6);
Anzeige: keine;
}
.popOut{
Position: fest;
Breite: 600px;
Höhe: 300px;
oben: 50 %;
links: 50 %;
Rand oben: -150px;
Rand links: -300px;
Hintergrund:#fff;
Rahmenradius: 8px;
Überlauf: versteckt;
Anzeige: keine;
}
.popOut > span{
Position: absolut;
rechts: 10px;
oben: 0;
Höhe: 42px;
Zeilenhöhe: 42px;
Farbe: #000;
Schriftgröße: 30px;
Cursor: Zeiger;
}
.popOut-Tabelle{
Anzeige: Block;
Rand: 42px automatisch 0;
Breite: 520px;
}
.popOut-Beschriftung{
Breite: 520px;
Textausrichtung: zentriert;
Farbe: #f40;
Schriftgröße: 18px;
Zeilenhöhe: 42px;
}
.popOut-Tabelle tr td{
Farbe: Nr. 666;
Polsterung: 6px;
Schriftgröße: 14px;
}
.popOut-Tabelle tr td:erstes-Kind{
Textausrichtung: rechts;
}
.inp{
Breite: 280px;
Höhe: 30px;
Zeilenhöhe: 30px;
Rand: 1px durchgezogen #999;
Polsterung: 5px 10px;
Farbe: #000;
Schriftgröße: 14px;
Rahmenradius: 6px;
}
.inp:Fokus{
Rahmenfarbe: #f40;
}
@keyframes ani{
aus{
transformieren: verschiebeX(-100 %), drehen(-60 Grad), skalieren(.5);
}
50 %{
transformieren: verschiebeX(0) drehen(0) skalieren(1);
}
90 %
transformieren: verschiebeX(20px) drehen(0) skalieren(.8);
}
Zu{
transformieren: verschiebeX(0) drehen(0) skalieren(1);
}
}
.ani{ Animation:ani .5s ease-in-out;}
</Stil>
<button type="button">Anmelden</button>
<div Klasse="popOutBg"></div>
<div Klasse="popOut">
<span title="Schließen"> x </span>
<Tabelle>
<caption>Willkommen auf dieser Website</caption>
<tr>
<td width="120">Benutzername:</td>
<td><input type="text" class="inp" placeholder="Bitte geben Sie Ihren Benutzernamen ein" /></td>
</tr>
<tr>
<td>Passwort:</td>
<td><input type="password" class="inp" placeholder="Bitte geben Sie Ihr Passwort ein" /></td>
</tr>
<tr>
<td colspan="2"><input type="button" class="login" value="Anmelden" /></td>
</tr>
</Tabelle>
</div>
<Skripttyp="text/javascript">
Funktion $(param) {
wenn (Argumente[1] == true) {
gibt document.querySelectorAll(param) zurück;
} anders {
gibt document.querySelector(param) zurück;
}
}
Funktion ani() {
$(".popOut").className = "popOut-ani";
}
$("Schaltfläche").beiKlick = Funktion() {
$(".popOut").style.display = "Block";
ani();
$(".popOutBg").style.display = "Block";
};
$(".popOut > span").onclick = Funktion() {
$(".popOut").style.display = "keine";
$(".popOutBg").style.display = "keine";
};
$(".popOutBg").onclick = Funktion() {
$(".popOut").style.display = "keine";
$(".popOutBg").style.display = "keine";
};
</Skript>
</body>
</html> Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Beschreiben Sie kurz den Unterschied zwischen Redis und MySQL
>>: Verwenden Sie Dockercompose, um eine Springboot-MySQL-Nginx-Anwendung zu erstellen
Artikel empfehlen
JS realisiert die Kartenausgabe-Animation
In diesem Artikelbeispiel wird der spezifische JS...
Element mit Auswahltabelle zum Ändern des Kontrollkästchens in der Kopfzeile in Textimplementierungscode
Methode 1: Verwenden Sie Tabellenattribute: Heade...
Tutorial zur Installation von Elasticsearch 7.6.2 in Docker
Docker installieren Sie müssen Docker installiere...
So lösen Sie die Hintergrundkachelung und den Rahmenbruch von CSS-Style-Div oder -Li in IE6
Die Lösung für die Hintergrundkachelung oder Rahme...
Detailliertes Tutorial zum Erstellen einer privaten Nextcloud-Cloud-Speichernetzwerkfestplatte
Nextcloud ist ein Open Source- und kostenloses Ne...
Detaillierte Erklärung der Listendarstellung von Vue
Inhaltsverzeichnis 1. v-for: Array-Inhalte durchl...
So verstehen und identifizieren Sie Dateitypen in Linux
Vorwort Wie wir alle wissen, ist in Linux alles e...
CSS3 Milchglaseffekt
Wenn der Milchglaseffekt gut gelingt, kann er die...
Bringen Sie Ihnen bei, wie Sie in 5 Minuten den Redis-Clustermodus und den Sentinelmodus mit Docker erstellen
Inhaltsverzeichnis 1. Vorbereitung Ziehen Sie das...
Python schreibt die Ausgabe in den CSV-Vorgang
Wie unten dargestellt: def test_write(selbst): Fe...
Wie wählt man das perfekte Aloe Vera Gel aus? Perfektes Aloe Vera Gel – So erkennen Sie Echtheit und Fälschung
Die neueste Verpackungsschachtel für Perfect Aloe...
Eine kurze Diskussion über React Native APP-Updates
Inhaltsverzeichnis App-Update-Prozess Grobes Flus...
So importieren/speichern/laden/löschen Sie Bilder lokal in Docker
1. Docker importiert lokale Images Manchmal kopie...
Verwendung und Verständnis von MySQL-Triggern
Inhaltsverzeichnis 1. Was ist ein Auslöser? 2. Er...
Analyse und Erklärung der Unterschiede zwischen DIV-, Tabellen- und XHTML-Website-Erstellung
Vereinfacht ausgedrückt geht es beim Erstellen ein...