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
So verwenden Sie HTML-Tabellen (um den visuellen Effekt einer Webseite anzuzeigen)
Wir wissen, dass wir beim Verwenden von HTML im N...
WEB Standard-Webseitenstruktur
Ob es sich nun um das Hintergrundbild oder die Tex...
MySQL 8.0.13 Installations- und Konfigurations-Tutorial unter CentOS7.3
1. Grundlegende Umgebung 1. Betriebssystem: CentO...
Der Effekt eines dynamischen CSS-Farbverlaufsrahmens, der um den Inhaltsbereich rotiert (Beispielcode)
Rendern Nachdem ich online nach relevanten Inform...
Tutorial zur Samba-Konfiguration für die Dateifreigabe im Linux-System
Inhaltsverzeichnis Deinstallieren und installiere...
Linux-Betrieb und -Wartung – Tutorial zur grundlegenden Datenträgerverwaltung
1. Festplattenpartition: 2. fdisk-Partition Wenn ...
HTML-Seite unterstützt die Implementierung des Dunkelmodus
Seit 2019 verwenden sowohl Android- als auch iOS-...
Detaillierte Erklärung des Befehlsmodus in der Javascript-Praxis
Inhaltsverzeichnis Definition Struktur Beispiele ...
Zusammenfassung mehrerer Methoden zur Implementierung der vertikalen Zentrierung mit CSS
Im Front-End-Layoutprozess ist es relativ einfach...
Detaillierte Einführung in den HTML-Head-Tag
Der HTML-Kopfteil enthält viele Tags und Elemente,...
Tomcat-Domänennamenzugriff mit mehreren Ports und Konfiguration zum Aktivieren der GZIP-Komprimierungsmethode
1. Zusätzlich zum Standardport 8080 versuchen wir...
So ändern Sie die CentOS-Serverzeit auf die Peking-Zeit
1. Ich habe ein VPS- und CentOS-System gekauft un...
Implementierung der One-Click-Verpackung und -Veröffentlichung von Vue-Projekten mit Jenkins
Inhaltsverzeichnis Jenkins-Installation Installie...
Lösung für den internen Serverfehler Nginx 500
Als ich heute Nginx verwendete, trat ein 500-Fehl...
MySQL versteht kurz, wie "order by" funktioniert
Zum Sortieren ist „order by“ ein Schlüsselwort, d...