Las indicaciones generales del formulario siempre ocuparán la posición del formulario, lo que hace que el formulario sea más largo o más amplio, afectando el diseño, pero este problema se puede resolver si el cuadro de inmediato flota junto al contenido requerido como un cuadro de diálogo.
Html y estilosHaz un formulario primero
<div id = form-blok> <h1> registrar </h1> <form de formulario = form-form de clases = Center-Block> <div> <input id = correo electrónico = form-confontrol placeHOLDER = CORREAILLO> </div> <div> <input id = vrf class = form-confontrol placeHolder = código de verificación> </form> </div> </div>
Entonces necesitamos diseñar el cuadro de diálogo
Probablemente sea eso, que consiste en un triángulo y un rectángulo.
#tips {Padding-top: 6px; Index Z: 9999; /*Presione la conversación para evitar ser oscurecidos por otros elementos*/ Posición: fijo; Ancho: 1000px; } #formulario de forma {Color de fondo: negro; Color: #ffffff; relleno: 0 6px; Posición: Absoluto; } #triangle {borde: 10px sólido; color de borde: transparente negro transparente transparente; } <div id = alter> <etiqueta id = triangle> </label> <etiqueta id = form-alert> Este es un indicador </label> </div>¿Cómo surgió el triángulo? Consulte esta experiencia
Implementación de JS flotandoLa página ya está lista, y ahora necesitamos una función para cambiar el contenido y la posición del cuadro de diálogo.
const tips = document.getElementById (tips); // msg es la información rápida, obj es el elemento que debe solicitarse la función showTips (msg, obj) {tips.style.display = block; // show dialog oculto var domrect = obj.getBoundingClientRect (); // Obtener la información de ubicación del elemento del elemento Var width = obj. // Mostrarlo detrás del elemento, así que agregue la altura VAR amplia = domrect.y; Tips.style.top = altura+px; Tips.style.left = ancho+px; document.getElementById (formulario) .innerhtml = msg; // Cambie el texto de diálogo obj.onblur = function () {tips.style.display = none; // ocultar el cuadro de diálogo cuando el elemento está fuera de foco // ya que lo uso en una tabla aquí, uso fuera de foco y lo modifico según sea necesario}; window.onresize = function (ev) {showtips (msg, obj); // Recalcule la posición del cuadro de diálogo cuando la ventana cambia de tamaño}}Diagrama de reproducción
Código completo D
<! DocType html> <html lang = en> <head> <meta charset = utf-8> <title> title </title> <link rel = stylesheet href = ../static/css/bootstrap.css> <style> cuerpo, html {color de fondo: #70a1ff; margen: 0; relleno: 0; Ancho: 100%; Altura: 100%; } cuerpo *{Duración de transición: 500ms; } #Form-block {text-align: center; Posición: Absoluto; arriba: 50%; Izquierda: 50%; Ancho: 500px; Altura: 200px; Color de fondo: #F1F2F6; transformación: traducido (-50%) traduceX (-50%); Shadow de caja: 0 0 10px #000000; } #formulario de forma {ancho: 70%; } #form-form-form> *{margen: 10px; } #-Warning de correo electrónico {Display: None; } #tips {Padding-top: 6px; DS Z-Index: 9999; Posición: fijo; Ancho: 1000px; } #formulario de forma {Color de fondo: negro; Color: #ffffff; relleno: 0 6px; Posición: Absoluto; } #triangle {borde: 10px sólido; color de borde: transparente negro transparente transparente; } </style> </head> <body> <div id = tips> <etiqueta id = triangle> </label> <etiqueta id = form-tips> Este es un indicador </label> </div> <div id = form-block> <h1> registrar </h1> <formul de formularidad = form-forma = centro-block> <div> <input onfocus = showtips ('correo electrónico', este) Id = correaje = formul PlaceHolder = Correo electrónico> <div ID = correo electrónico-warning class = etiqueta-warning> ¡Ingrese la dirección de correo electrónico correcta! </div> </div> <div> <input onFocus = showTips ('test text', this) id = vrf class = form-confontrol placeholder = Code de verificación> <Div ID = vrf-warning class = warning-warning hidden> ¡por favor, ingrese la dirección de correo electrónico correcta! </div> <!-<botón οnclick = ChangeFormHeight ('500')> test </boton>-> <script> const tips = document.getElementById (TIPS); función showTips (msg, obj) {tips.style.display = block; var domrect = obj.getBoundingClientRect (); Var ancho = domrect.x+obj.clientwidth; Var altura = domrect.y; Tips.style.top = altura+px; Tips.style.left = ancho+px; document.getElementById (formulario) .innerhtml = msg; obj.onblur = function () {tips.style.display = none; }; window.onresize = function (ev) {showtips (msg, obj); }} </script> </body> </html> ResumirLo anterior es el código de implementación de la función de cuadro de solicitud flotante HTML introducido por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!
Si cree que este artículo es útil para usted, reimprima. Por favor, indique la fuente, ¡gracias!