Implementierungscode der HTML-Floating-Promptbox-Funktion
|
Allgemeine Formulareingabeaufforderungen belegen immer den Formularplatz, wodurch das Formular länger oder breiter wird und das Layout beeinträchtigt wird. Dieses Problem kann jedoch gelöst werden, wenn das Eingabeaufforderungsfeld wie ein Dialogfeld neben dem erforderlichen Inhalt schwebt. HTML und Stile Erstellen Sie zunächst ein Formular
<div id="Formularblock">
<h1>Registrieren</h1>
<Formular-ID="Formular-Formular" Klasse="Center-Block">
<div>
<input id="email" class="form-control" placeholder="E-Mail">
</div>
<div>
<input id="vrf" class="form-control" placeholder="Verifizierungscode">
</form>
</div>
</div>Dann müssen wir das Dialogfeld entwerfen
Das ist es ungefähr. Es besteht aus einem Dreieck und einem Rechteck.
#Tipps{
Polsterung oben: 6px;
Z-Index: 9999;
/*Lassen Sie die Konversation oben anheften, damit sie nicht von anderen Elementen blockiert wird*/
Position: fest;
Breite: 1000px;
}
#form-tips{
Hintergrundfarbe: schwarz;
Farbe: #ffffff;
Polsterung: 0 6px;
Position: absolut;
}
#Dreieck{
Rand: 10px durchgezogen;
Rahmenfarbe: transparent schwarz transparent transparent;
}
<div id="alter">
<label id="dreieck"></label>
<label id="form-alert">Dies ist eine Erinnerung</label>
</div>Wie ist das Dreieck entstanden? Beziehen Sie sich auf diese Erfahrung js, um schweben zu erreichen Die Seite ist fertig, jetzt brauchen wir eine Funktion um den Inhalt und die Position des Dialogfeldes zu ändern.
const TIPS = document.getElementById("Tipps");
//msg ist die Eingabeaufforderungsnachricht, obj ist das Element, das die Eingabeaufforderungsfunktion benötigt showTips(msg, obj) {
TIPS.style.display = "block"; //Zeige das versteckte Dialogfeld var domRect = obj.getBoundingClientRect(); //Positionsinformationen des Elements abrufen var width = domRect.x+obj.clientWidth; //Wird hinter dem Element angezeigt, also die Breite des Elements hinzufügen var height = domRect.y;
TIPS.style.top = Höhe+"px";
TIPS.style.left = Breite+"px";
document.getElementById("form-tips").innerHTML = msg; //Dialogtext ändern obj.onblur = function () {
TIPS.style.display = "none"; //Dialogfeld ausblenden, wenn das Element den Fokus verliert //Hier verwende ich es in einer Tabelle, also verwende ich die Defokussierungsmethode. Ändern Sie sie nach Bedarf};
Fenster.onresize = Funktion (ev) {
showTips(msg, obj); //Dialogposition neu berechnen, wenn sich die Fenstergröße ändert}
}Rendern
Vollständiger Code
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
<link rel="stylesheet" href="../static/css/bootstrap.css">
<Stil>
Textkörper,html{
Hintergrundfarbe: #70a1ff;
Rand: 0;
Polsterung: 0;
Breite: 100 %;
Höhe: 100%;
}
Körper *{
Übergangsdauer: 500ms;
}
#Formularblock{
Textausrichtung: zentriert;
Position: absolut;
oben: 50 %;
links: 50%;
Breite: 500px;
Höhe: 200px;
Hintergrundfarbe: #f1f2f6;
transformieren: versetzeY(-50%) versetzeX(-50%);
Kastenschatten: 0 0 10px #000000;
}
#form-form{
Breite: 70%;
}
#form-form > *{
Rand: 10px;
}
#E-Mail-Warnung{
Anzeige: keine;
}
#Tipps{
Polsterung oben: 6px; ds
Z-Index: 9999;
Position: fest;
Breite: 1000px;
}
#form-tips{
Hintergrundfarbe: schwarz;
Farbe: #ffffff;
Polsterung: 0 6px;
Position: absolut;
}
#Dreieck{
Rand: 10px durchgezogen;
Rahmenfarbe: transparent schwarz transparent transparent;
}
</Stil>
</Kopf>
<Text>
<div id="Tipps">
<label id="dreieck"></label>
<label id="form-tips">Dies ist ein Tipp</label>
</div>
<div id="Formularblock">
<h1>Registrieren</h1>
<form id="form-form" class="center-block">
<div>
<input onfocus="showTips('E-Mail-Tipps',this)" id="email" class="form-control" placeholder="E-Mail">
<div id="email-warning" class="label-warning">Bitte geben Sie eine gültige E-Mail-Adresse ein!</div>
</div>
<div>
<input onfocus="showTips('Testtext', dieser)" id="vrf" class="form-control" placeholder="Verifizierungscode">
<div id="vrf-warning" class="label-warning hidden">Bitte geben Sie eine gültige E-Mail-Adresse ein!</div>
</div>
</form>
</div>
<!-- <button click="changeFormHeight('500')">Test</button>-->
<Skript>
const TIPS = document.getElementById("Tipps");
Funktion zeigeTipps(msg, obj) {
TIPS.style.display = "Block";
var domRect = obj.getBoundingClientRect();
var Breite = domRect.x + obj.clientWidth;
var Höhe = domRect.y;
TIPS.style.top = Höhe+"px";
TIPS.style.left = Breite+"px";
document.getElementById("form-tips").innerHTML = msg;
obj.onblur = Funktion () {
TIPS.style.display = "keine";
};
Fenster.onresize = Funktion (ev) {
Tipps anzeigen(Nachricht, Objekt);
}
}
</Skript>
</body>
</html>Zusammenfassen Oben sehen Sie den Implementierungscode der vom Editor eingeführten HTML-Floating-Promptbox-Funktion. Ich hoffe, er ist für alle hilfreich. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! |
<<: Detailliertes Beispiel für JavaScript-Array-Methoden
>>: Beispielcode für CSS3 zum Erzielen eines Bildlaufleisten-Verschönerungseffekts
Artikel empfehlen
JS realisiert die automatische Wiedergabe der Timeline
Vor kurzem habe ich einen solchen Effekt implemen...
So füllen Sie Elemente in Spalten im CSS-Rasterlayout
Angenommen, wir haben n Elemente und müssen diese...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.22 unter Windows 10
Grafisches Tutorial zur Installation und Konfigur...
Diagramm des Tutorials zur Installation der Version VMware 15.5 unter Windows_Server_2008_R2
1. Erstellen Sie eine neue virtuelle Maschine aus...
Super einfache QPS-Statistikmethode (empfohlen)
Statistik der QPS-Werte der letzten N Sekunden (i...
Stapelweises Ersetzen eines Teils der Daten eines Felds in MySQL (empfohlen)
Stapelweises Ersetzen eines Teils der Daten eines...
Linux /etc/network/interfaces Konfigurationsschnittstellenmethode
Die Datei /etc/network/interfaces wird in Linux z...
Lösung für den Fall, dass der Tomcat-Server tomcat7w.exe nicht öffnen kann
Beim Konfigurieren des Tomcat-Servers ist mir heu...
So verwenden Sie CSS-Attribute, um Mausereignisse zu blockieren (Mausklicks können obere Elemente durchdringen)
Ursprung: Vor einigen Tagen hat ein Tester eine A...
CentOS7 stellt Version 19 von Docker bereit (einfach, Sie können es nachvollziehen)
1. Installieren Sie Abhängigkeitspakete [root@loc...
So schreiben Sie asynchrone Aufgaben in modernem JavaScript
Vorwort In diesem Artikel untersuchen wir die Ent...
Einführung in Spark und Vergleich mit Hadoop
Inhaltsverzeichnis 1. Spark vs. Hadoop 1.1 Nachte...
Konvertieren von XHTML-CSS-Seiten in Druckerseiten
In der Vergangenheit bedeutete das Erstellen eine...
Implementierung der Docker-Compose-Bereitstellung des ZK+Kafka+Storm-Clusters
Übersicht über die Clusterbereitstellung 172.22.1...
3 häufige Fehler beim Lesen von MySQL Binlog-Protokollen
1. mysqlbinlog: [FEHLER] unbekannte Variable „def...