js implementiert das Popup-Anmeldefeld durch Klicken auf das Popup-Fenster

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:
  • Detaillierte Erläuterung von drei Möglichkeiten zur Implementierung von JS-Popup-Fenstern in JavaScript
  • js zur Implementierung eines Popup-Fenster-Zahlenratespiels
  • Natives js zur Realisierung der Popup-Nachrichtenanimation
  • Tutorial zur Integration von OpenLayers in Vue zum Laden von GeoJSON und Implementieren eines Popup-Fensters
  • js, um einen Popup-Effekt zu erzielen
  • Implementierung eines Popup-Fensters zur Abfrage, ob die Übermittlung basierend auf JS+HTML bestätigt werden soll
  • JavaScript, um Scrollen nach dem mobilen Popup-Fenster zu verhindern
  • Verwendung verschiedener JavaScript-Popup-Ereignisse

<<:  Beschreiben Sie kurz den Unterschied zwischen Redis und MySQL

>>:  Verwenden Sie Dockercompose, um eine Springboot-MySQL-Nginx-Anwendung zu erstellen

Artikel empfehlen

Die einfachste Lösung für das Problem, dass Sublime Text in Ubuntu kein Chinesisch eingeben kann

Sublimieren Sublime Text ist ein Code-Editor (Sub...

Ladeanimation mit CSS3 implementiert

Ergebnisse erzielen Implementierungscode <h1&g...

So implementieren Sie einen binären Suchbaum mit JavaScript

Eine der am häufigsten verwendeten und diskutiert...

So verwenden Sie nginx, um bestimmte URL-Anfragen durch reguläre Ausdrücke abzufangen

Nginx-Server nginx ist ein ausgezeichneter Webser...

Tutorial zur Installation von Microsoft TrueType-Schriftarten auf Ubuntu-basierten Distributionen

Wenn Sie einige Microsoft-Dokumente mit LibreOffi...

vue3.0 + echarts realisiert dreidimensionales Säulendiagramm

Vorwort: Vue3.0 implementiert dreidimensionales S...

Installation von CUDA10.0 und Probleme in Ubuntu

Die Entsprechung zwischen der Tensorflow-Version ...

Lösung für die Auswirkungen leerer Pfade auf die Seitenleistung

Vor ein paar Tagen habe ich einen von Yu Bo getei...

Erstellen eines Dateisystems für ARM-Entwicklungsboards unter Linux

1. Bitte laden Sie den Busybox-Quellcode online h...

Beispiel für die Bereitstellungsmethode „Forever+nginx“ einer Node-Site

Ich habe vor Kurzem den günstigsten Tencent-Cloud...

So verwenden Sie den dd-Befehl in Linux, ohne die Festplatte zu zerstören

Egal, ob Sie versuchen, Daten von einem sterbende...

Drei Arten des HTML+CSS-Layouts (natürliches Layout/fließendes Layout/positioniertes Layout)

1. Natürliches Layout <br />Das Layout ohne ...

Eine kurze Analyse der Probleme, auf die bei der Erstellung von 404-Fehlerseiten geachtet werden sollte

Bei der Optimierung einer Website müssen wir lern...

Detaillierte Erklärung zur Verwendung des Grep-Befehls in Linux

1. Offizielle Einführung grep ist ein häufig verw...

Ein kurzes Verständnis der MySQL SELECT-Ausführungsreihenfolge

Die vollständige Syntax der SELECT-Anweisung laut...