Les invites de formulaire général occuperont toujours la position du formulaire, ce qui rend la forme plus longue ou plus large, affectant la disposition, mais ce problème peut être résolu si la boîte d'invite flotte à côté du contenu requis comme une boîte de dialogue.
HTML et stylesFaire une forme d'abord
<div id = form-block> <h1> registre </h1> <form id = form-form class = Center-Block> <div> <input id = e-mail class = form-control placeholder = e-mail> </ div> <div> <input id = vrf class = form-control placeholder = Verification Code> </orm> </vrf> </v> formulaire-control Planholder = Verification Code> </ form> </vrf> </v> Form-Control SplaceHolder = Verification Code> </ Form> </ Div> </div>
Ensuite, nous devons concevoir la boîte de dialogue
C'est probablement cela, composé d'un triangle et d'un rectangle.
#tips {padding-top: 6px; Z-Index: 9999; / * Appuyez sur la conversation pour éviter d'être obscurci par d'autres éléments * / Position: fixe; Largeur: 1000px; } # form-tips {background-Color: noir; Couleur: #ffffff; rembourrage: 0 6px; Position: absolue; } #triangle {border: 10px solide; Color à la frontière: transparent noir transparent transparent; } <div id = alter> <label id = triangle> </bable> <label id = form-alert> Ceci est une invite </b label> </div>Comment le triangle est-il né? Reportez-vous à cette expérience
JS Implémentation flottanteLa page est déjà terminée, et maintenant nous avons besoin d'une fonction pour modifier le contenu et la position de la boîte de dialogue.
const ips = document.getElementById (TIPS); // msg est l'information rapide, obj est l'élément qui doit être une fonction invitée showtips (msg, obj) {Tips.style.display = block; // Afficher la boîte de dialogue cachée var domrect = obj.getboundclientRect (); // obtenir les informations de localisation de l'élément var width width = DomRect.x + Obj. // montre-le derrière l'élément, alors ajoutez la grande hauteur var = domrect.y; TIPS.STYLE.TOP = HEELT + PX; TIPS.style.left = largeur + px; document.getElementById (form-tips) .InnerHtml = msg; // Modifiez le texte de la boîte de dialogue obj.onblur = function () {Tips.style.display = Aucun; // Masque la boîte de dialogue lorsque l'élément est hors de focus // Puisque je l'utilise dans un tableau ici, j'utilise hors de focus et le modifie selon les besoins}; window.onresize = function (ev) {showtips (msg, obj); // recalculer la position de la boîte de dialogue lorsque la fenêtre change de taille}}Diagramme de reproduction
Code complet D
<! Doctype html> <html Lang = en> <A-head> <meta charset = utf-8> <itle> title </ title> <link rel = Stylesheet href = .. / static / css / bootstrap.css> <style> body, html {background-Color: # 70a1ff; marge: 0; rembourrage: 0; Largeur: 100%; hauteur: 100%; } corps * {Durée de transition: 500 ms; } # Form-block {Text-Align: Centre; Position: absolue; en haut: 50%; Gauche: 50%; Largeur: 500px; hauteur: 200px; Color d'arrière-plan: # f1f2f6; Transform: tradlatey (-50%) tradlatex (-50%); Box-Shadow: 0 0 10px # 000000; } # form-formulaire {largeur: 70%; } # form-form> * {margin: 10px; } # Email-Warning {affichage: aucun; } #tips {padding-top: 6px; DS Z-Index: 9999; Position: fixe; Largeur: 1000px; } # form-tips {background-Color: noir; Couleur: #ffffff; rembourrage: 0 6px; Position: absolue; } #triangle {border: 10px solide; Color à la frontière: transparent noir transparent transparent; } </ style> </ head> <body> <div id = TIPS> <label id = triangle> </ labe> <label id = form-tips> Ceci est une invite </ labor placeholder = e-mail> <div id = e-mail-warning class = Label-warning> Veuillez saisir l'adresse e-mail correcte! </div> </div> <div> <entrée onfocus = showtips ('Test Text', this) id = vrf class = form-control PageHolder = Verification Code> <div id = vrf-warning class = Label-Warnden> Hidden> Entrer entre la adresse e-mail correcte! </div> <! - <Button οnClick = ChangeFormHeight ('500')> Test </utton> -> <cript> const les tips = document.getElementById (Tips); fonction showtips (msg, obj) {Tips.style.display = block; var domrect = obj.getBoundingClientRect (); var width = domrect.x + obj.clientwidth; var hauteur = domrect.y; TIPS.STYLE.TOP = HEELT + PX; TIPS.style.left = largeur + px; document.getElementById (form-tips) .InnerHtml = msg; obj.onblur = function () {Tips.style.display = aucun; }; window.onresize = function (ev) {showtips (msg, obj); }} </ script> </ body> </html> RésumerCe qui précède est le code d'implémentation de la fonction HTML Floating Invite Box qui vous est présentée par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!
Si vous pensez que cet article vous est utile, veuillez le réimprimer. Veuillez indiquer la source, merci!