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
HTML5+CSS3-Codierungsstandards
Die goldene Regel Unabhängig davon, wie viele Per...
MySQL-Paging-Abfragemethode für Millionen von Datenmengen und ihre Optimierungsvorschläge
Die SQL-Optimierung von Datenbanken ist ein häufi...
So installieren Sie die neueste Version von Docker mit dem Befehl „Deepin apt“
Schritt 1: Ubuntu-Quelle hinzufügen Wechseln Sie ...
Eine kurze Diskussion über die entsprechenden Versionen von node node-sass sass-loader
Inhaltsverzeichnis Die Knotenversion stimmt nicht...
Verwenden Sie Vue3 zur Datenbindung und Anzeigelistendaten
Inhaltsverzeichnis 1. Vergleich mit Vue2 1. Neue ...
Zusammenfassung der Konfigurationsprobleme von Nginx-Standort und Proxy-Pass-Pfad
Inhaltsverzeichnis 1. Grundlegende Konfiguration ...
Beispielcode für MySQL-Datensicherung und -wiederherstellung
1. Datensicherung 1. Verwenden Sie den Befehl mys...
Es gibt eine zusätzliche leere Zeile, nachdem die HTML-Seite Include verwendet, um die PHP-Datei zu importieren
Die im Internet gefundene Methode funktioniert Die...
CSS3 realisiert das Papierflugzeug aus der Kindheit
Heute werden wir Origami-Flugzeuge basteln (die A...
Detaillierte Erklärung zur grundlegenden Verwendung des React Native-Scaffoldings
Erstellen des Projekts Führen Sie die Befehlszeil...
HarborRestart-Vorgang nach dem Ändern der Konfigurationsdatei
Ich werde nicht viel Unsinn erzählen, schauen wir...
Eine kurze Diskussion über das Prinzip des bidirektionalen Ereignisbindungs-V-Modells von Vue
Inhaltsverzeichnis erklären: Zusammenfassen Auffü...
So entfernen Sie den gepunkteten Rahmen beim Klicken auf einen Link in FireFox
Ich bin heute auf mehrere Browserkompatibilitätsp...
Detaillierte Erläuterung zur Verwendung von JS, um den Effekt einer PS-Radiergummi-Rubbelkarte auf der Leinwand zu erzielen
Inhaltsverzeichnis Wirkungsdemonstration:Hauptimp...
HTML+CSS zum Erzielen von Spezialeffekten durch Textfaltung – Beispiel
In diesem Artikel werden hauptsächlich Beispiele ...