Implementation code of html floating prompt box function
|
General form prompts always occupy the form space, 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 styles First make a form
<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
That's about it, made up of a triangle and a rectangle.
#tips{
padding-top: 6px;
z-index: 9999;
/*Make the conversation stick to the top so it won’t be blocked 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 reminder</label>
</div>How did the triangle come about? Refer to this experience js to achieve floating The page is ready, now we need a function to change the content and position of the dialog box.
const TIPS = document.getElementById("tips");
//msg is the prompt message, obj is the element that needs prompt function showTips(msg, obj) {
TIPS.style.display = "block"; //Show the hidden dialog box var domRect = obj.getBoundingClientRect(); //Get the position information of the element var width = domRect.x+obj.clientWidth; //Displayed behind the element, so add the width of the element 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 loses focus //Here I use it in a table, so I use the defocus method. Modify it as needed};
window.onresize = function (ev) {
showTips(msg, obj); //Recalculate the dialog position when the window changes size}
}Rendering
Complete code
<!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 tip</label>
</div>
<div id="form-block">
<h1>Register</h1>
<form id="form-form" class="center-block">
<div>
<input onfocus="showTips('Email Tips',this)" id="email" class="form-control" placeholder="Email">
<div id="email-warning" class="label-warning">Please enter a 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 a valid email address!</div>
</div>
</form>
</div>
<!-- <button click="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>Summarize The above is the implementation code of the HTML floating prompt box function introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! |
<<: Detailed Example of JavaScript Array Methods
>>: Example code for css3 to achieve scroll bar beautification effect
Recommend
Vue implements a complete process record of a single file component
Table of contents Preface Single file components ...
MySQL 8.0.12 winx64 decompression version installation graphic tutorial
Recorded the installation of mysql-8.0.12-winx64 ...
How to uninstall MySQL 8.0 version under Linux
1. Shut down MySQL [root@localhost /]# service my...
Summary of CSS front-end knowledge points (must read)
1. The concept of css: (Cascading Style Sheet) Ad...
MySQL 8.0.11 installation and configuration method graphic tutorial MySQL 8.0 new password authentication method
This article shares with you the graphic tutorial...
Pure CSS to achieve input box placeholder animation and input verification
For more exciting content, please visit https://g...
HTML basic summary recommendation (text format)
HTML text formatting tags 標簽 描述 <b> 定義粗體文本 ...
Solution to Tomcat server failing to open tomcat7w.exe
I encountered a little problem when configuring t...
Detailed explanation of the loading rules of the require method in node.js
Loading rules of require method Prioritize loadin...
Summary of MySQL Architecture Knowledge Points
1. Databases and database instances In the study ...
Detailed explanation of the process of using GPU in Docker
Table of contents Download tf-gpu Build your own ...
Detailed explanation of nginx reverse proxy webSocket configuration
Recently, I used the webSocket protocol when work...
Detailed explanation of keepAlive usage in Vue front-end development
Table of contents Preface keep-avlive hook functi...
Steps to deploy hyper-V to achieve desktop virtualization (graphic tutorial)
The hardware requirements for deploying Hyper-V a...
Summary and practice of javascript prototype chain diagram
Table of contents Prototype chain We can implemen...