Общие подсказки формы всегда будут занимать положение формы, делая форму более длинной или шире, влияя на макет, но эта проблема может быть решена, если окно приглашения плавает рядом с требуемым контентом, как диалоговое окно.
HTML и стилиСделайте форму сначала
<div id = form block> <h1> Register </h1> <form id = form-form class = center-block> <div> <input id = class = class = form-control Placeholder = email> </div> <div> <input id = vrf class = form-control Placeholder = код проверки> </form> </div> </div>
Тогда нам нужно разработать диалоговое окно
Вероятно, это, состоящее из треугольника и прямоугольника.
#tips {Padding-top: 6px; Z-Index: 9999; /*Нажмите на разговор, чтобы не быть скрытыми другими элементами*/ позиция: исправлена; Ширина: 1000px; } #form-tips {фоновое цвета: black; Цвет: #ffffff; Подкладка: 0 6px; позиция: абсолютно; } #triangle {border: 10px solid; Пограничный цвет: прозрачный черный прозрачный прозрачный; } <div id = alter> <label id = triangle> </label> <label id = form-alert> Это подсказка </label> </div>Как появился треугольник? Обратитесь к этому опыту
JS реализация плавающейСтраница уже сделана, и теперь нам нужна функция, чтобы изменить контент и положение диалогового окна.
const tips = document.getElementbyId (tips); // msg - это оперативная информация, obj - это элемент, который необходимо продлить функцию Showtips (msg, obj) {tips.style.display = block; // Показать скрытый диалог var domrect = obj.getBoundingClientRect (); // Получить информацию о местоположении var -width = obient. // показать его за элементом, поэтому добавьте широкую высоту var = domrect.y; Tips.style.top = высота+px; Tips.style.left = ширина+px; document.getElementById (Form-Tips) .innerHtml = msg; // Измените диалог текст obj.onblur = function () {tips.style.display = none; // скрыть диалоговое окно, когда элемент выходит из фокуса // Поскольку я использую его в таблице здесь, я использую из фокуса и изменяю его по мере необходимости}; window.onresize = function (ev) {showtips (msg, obj); // пересказывать положение диалогового окна, когда окно меняет размер}}Диаграмма воспроизведения
Полный код d
<! Doctype html> <html lang = en> <head> <meta charset = utf-8> <title> title </title> <link rel = stylesheet href = ../static/css/bootstrap.css> <style> body, html {фоновый цвет: #70a1ff; поля: 0; Заполнение: 0; Ширина: 100%; высота: 100%; } body *{продолжительность перехода: 500 мс; } #form-block {text-align: center; позиция: абсолютно; Верх: 50%; Слева: 50%; Ширина: 500px; Высота: 200px; фоновый цвет: #f1f2f6; Преобразование: Translatey (-50%) Transtatex (-50%); Box-Shadow: 0 0 10px #000000; } #форма форма {ширина: 70%; } #форма формы> *{margin: 10px; } #электронная почта {отображение: нет; } #tips {padding-top: 6px; DS Z-Index: 9999; позиция: исправлена; Ширина: 1000px; } #form-tips {фоновое цвета: black; Цвет: #ffffff; Подкладка: 0 6px; позиция: абсолютно; } #triangle {border: 10px solid; Пограничный цвет: прозрачный черный прозрачный прозрачный; } </style> </head> <body> <div id = tips> <label id = triangle> </label> <label id = form-tips> Это подсказка </label> </div> <div id = block> <h1> register </h1> <form id = form form class = center-block> <div> <input onfocus = showtips ('ampocient hypt hypt hypt hypt hypt hrappe = hisp, this) placeholder=email> <div id=email-warning class=label-warning>Please enter the correct email address!</div> </div> <div> <input onfocus=showTips('test text', this) id=vrf class=form-control placeholder=verification code> <div id=vrf-warning class=label-warning hidden>Please enter the correct email address!</div> </div> </form> </div> <!-<button onclick = changeformHeight ('500')> тест </button>-> <script> const tips = document.getElementById (tips); Функция Showtips (MSG, OBJ) {tips.style.display = block; var domrect = obj.getBoundingClientRect (); var width = domrect.x+obj.clientwidth; var height = domrect.y; Tips.style.top = высота+px; Tips.style.left = ширина+px; document.getElementById (Form-Tips) .innerHtml = msg; obj.onblur = function () {tips.style.display = none; }; window.onresize = function (ev) {showtips (msg, obj); }} </script> </body> </html> СуммироватьВыше приведено код реализации функции HTML Floating Prompt Function, введенной вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!
Если вы думаете, что эта статья полезна для вас, пожалуйста, перепечатайте ее. Пожалуйста, укажите источник, спасибо!