Os avisos de formulário geral sempre ocuparão a posição do formulário, tornando o formulário mais longo ou mais largo, afetando o layout, mas esse problema poderá ser resolvido se a caixa de prompt flutuar ao lado do conteúdo necessário, como uma caixa de diálogo.
HTML e estilosFaça um formulário primeiro
<div id = form-block> <H1> registro </h1> <formulário id = form-form-form = centralblock> <div> <idhp id = email class = form-se-control espaço de espaço em email = email> </div> <div> <insput id = vrf class = form-control placeholder = Código de verificação> </forma
Então precisamos projetar a caixa de diálogo
Provavelmente é isso, composto por um triângulo e um retângulo.
#TIPS {Padding-top: 6px; Z-Index: 9999; /*Pressione a conversa para evitar ser obscurecido por outros elementos*/ Posição: corrigido; Largura: 1000px; } #formulário-tips {Background-Color: Black; Cor: #ffffff; preenchimento: 0 6px; Posição: Absoluto; } #Triangle {borda: 10px Solid; cor de borda: transparente transparente transparente transparente; } <div id = alter> <rótulo id = triângulo> </label> <etiqueta id = form-alert> Este é um prompt </belt> </div>Como surgiu o triângulo? Consulte esta experiência
Implementação de JS flutuanteA página já está concluída e agora precisamos de uma função para alterar o conteúdo e a posição da caixa de diálogo.
const tips = document.getElementbyId (tips); // msg é a informação imediata, o obj é o elemento que precisa ser solicitado a função SHOWTIPS (msg, obj) {tips.style.display = block; // mostram informações de diálogo oculto do que o lomenseTh. // mostra -o por trás do elemento, então adicione a ampla altura var = domrect.y; Tips.style.top = altura+px; Tips.style.left = width+px; document.getElementById (formulário) .innerhtml = msg; // altere o texto de diálogo obj.onblur = function () {tips.style.display = nenhum; // Ocultar a caixa de diálogo quando o elemento estiver fora do foco // Como eu o uso em uma tabela aqui, uso fora de foco e modifico conforme necessário}; window.onResize = function (ev) {ShowTips (msg, obj); // recalcula a posição da caixa de diálogo quando a janela muda de tamanho}}Diagrama de reprodução
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> <yoy> corpo, html {background-color: #70a1ff; margem: 0; preenchimento: 0; largura: 100%; Altura: 100%; } corpo *{duração da transição: 500ms; } #form-bloco {text-align: Center; Posição: Absoluto; TOP: 50%; Esquerda: 50%; Largura: 500px; Altura: 200px; Background-Color: #f1f2f6; Transform: tradutor (-50%) translatex (-50%); Box-Shadow: 0 0 10px #000000; } #form-form {width: 70%; } #form-form> *{margem: 10px; } #e-mail-warning {display: Nenhum; } #TIPS {Padding-top: 6px; DS Z-Index: 9999; Posição: fixado; Largura: 1000px; } #formulário-tips {Background-Color: Black; Cor: #ffffff; preenchimento: 0 6px; Posição: Absoluto; } #Triangle {borda: 10px Solid; cor de borda: transparente transparente transparente transparente; } </style></head><body><div id=tips> <label id=triangle></label> <label id=form-tips>This is a prompt</label></div> <div id=form-block> <h1>Register</h1> <form id=form-form class=center-block> <div> <input onfocus=showTips('Email prompt', this) id=email class=form-control PISSONALIZADOR = EMAKEM> <Div ID = Class de Weerning-Warning = Rótulo> Por favor, insira o endereço de email correto! </div> <!-<Button οNCLICK = ChangeFormHeight ('500')> Teste </botão>-> <Critript> const TIPS = document.getElementById (TIPS); Função ShowTips (msg, obj) {tips.style.display = block; var domrect = obj.getBoundingClientRect (); var width = domrect.x+obj.clientWidth; var altura = domrect.y; Tips.style.top = altura+px; Tips.style.left = width+px; document.getElementById (formulário) .innerhtml = msg; obj.onblur = function () {tips.style.display = nenhum; }; window.onResize = function (eV) {ShowTips (msg, obj); }} </script> </body> </html> ResumirO exposto acima é o código de implementação da função de caixa de prompt flutuante HTML introduzida a você pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!
Se você acha que este artigo é útil para você, reimprimi -lo. Por favor, indique a fonte, obrigado!