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
Zusammenfassung der sieben MySQL JOIN-Typen
Bevor wir beginnen, erstellen wir zwei Tabellen, ...
Ein kurzer Vortrag über den Diff-Algorithmus in Vue
Inhaltsverzeichnis Überblick Virtueller Dom Prinz...
Eine kurze Diskussion über die Rolle von Vue3 defineComponent
Inhaltsverzeichnis defineComponent-Überladungsfun...
Eine bunte Katze unter Linux
Freunde, die das Linux-System verwendet haben, mü...
Beispiel für die Verwendung von UserMap in IMG
usemap ist ein Attribut des <img>-Tags, das ...
Vue implementiert die vollständige Auswahlfunktion
In diesem Artikelbeispiel wird der spezifische Co...
Detaillierte Erläuterung der Strategie des Abstimmungsalgorithmus von React für den Diffing-Algorithmus
Inhaltsverzeichnis Algorithmische Strategie Einze...
Hinweise zur IE8-Kompatibilität, die mir aufgefallen sind
1. getElementById von IE8 unterstützt nur IDs, nic...
Realisierung des Karusselleffekts basierend auf jQuery
In diesem Artikel wird der spezifische Code von j...
11 Beispiele für die erweiterte Verwendung von Eingabeelementen in Webformularen
1. Löschen Sie das gepunktete Feld, wenn die Scha...
Implementierung der React-Sternebewertungskomponente
Voraussetzung ist die Eingabe der Bewertungsdaten...
So verwenden Sie pdf.js zur Vorschau von PDF-Dateien in Vue
Wenn wir auf der Seite eine PDF-Vorschau anzeigen...
Vue implementiert einfache Rechnerfunktion
In diesem Artikelbeispiel wird der spezifische Co...
Detaillierte Erklärung der globalen Variablenimplementierung von Uniapp
Vorwort In diesem Artikel werden einige Implement...
Detaillierte Erläuterung des MySQL InnoDB-Sekundärindex-Sortierbeispiels
Sortierproblem Ich habe kürzlich auf Geek Time „4...