General form prompts will always occupy the position of the form, making the form longer or wider, affecting the layout, but this problem can be solved if the prompt box floats next to the required content like a dialog box.
HTML and stylesMake a form first
<div id=form-block> <h1>Register</h1> <form id=form-form class=center-block> <div> <input id=email class=form-control placeholder=email> </div> <div> <input id=vrf class=form-control placeholder=verification code> </form> </div></div>
Then we need to design the dialog box
It's probably that, consisting of a triangle and a rectangle.
#tips{ padding-top: 6px; z-index: 9999; /*Press the conversation to avoid being obscured by other elements*/ position: fixed; width: 1000px; } #form-tips{ background-color: black; color: #ffffff; padding: 0 6px; position: absolute; } #triangle{ border:10px solid; border-color: transparent black transparent transparent; }<div id=alter> <label id=triangle></label> <label id=form-alert>This is a prompt</label></div>How did the triangle come about? Refer to this experience
JS implementation floatingThe page is already done, and now we need a function to change the content and position of the dialog box.
const TIPS = document.getElementById(tips);//msg is the prompt information, obj is the element that needs to be prompted function showTips(msg, obj) { TIPS.style.display = block;//Show hidden dialog var domRect = obj.getBoundingClientRect();//Get the location information of the element var width = domRect.x+obj.clientWidth; //Show it behind the element, so add the wide var height = domRect.y; TIPS.style.top = height+px; TIPS.style.left = width+px; document.getElementById(form-tips).innerHTML = msg; //Change the dialog text obj.onblur = function () { TIPS.style.display = none;//Hide the dialog box when the element is out of focus// Since I use it in a table here, I use out of focus and modify it as needed}; window.onresize = function (ev) { showTips(msg, obj);//Recalculate the dialog box position when the window changes size} }Reproduction diagram
Complete code 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{ background-color: #70a1ff; margin: 0; padding: 0; width: 100%; height: 100%; } body *{ transition-duration: 500ms; } #form-block{ text-align: center; position: absolute; top: 50%; left: 50%; width: 500px; height: 200px; background-color: #f1f2f6; transform: translateY(-50%) translateX(-50%); box-shadow: 0 0 10px #000000; } #form-form{ width: 70%; } #form-form > *{ margin: 10px; } #email-warning{ display: none; } #tips{ padding-top: 6px; ds z-index: 9999; position: fixed; width: 1000px; } #form-tips{ background-color: black; color: #ffffff; padding: 0 6px; position: absolute; } #triangle{ border:10px solid; border-color: transparent black transparent transparent; } </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 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 οnclick=changeFormHeight('500')>Test</button>--><script> const TIPS = document.getElementById(tips); function showTips(msg, obj) { TIPS.style.display = block; var domRect = obj.getBoundingClientRect(); var width = domRect.x+obj.clientWidth; var height = domRect.y; TIPS.style.top = height+px; TIPS.style.left = width+px; document.getElementById(form-tips).innerHTML = msg; obj.onblur = function () { TIPS.style.display = none; }; window.onresize = function (ev) { showTips(msg, obj); } }</script></body></html> SummarizeThe above is the implementation code of the html floating prompt box function introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!