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