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
A brief discussion on the differences between FTP, FTPS and SFTP
Table of contents Introduction to FTP, FTPS and S...
How to dynamically modify the replication filter in mysql
MySQL dynamically modify replication filters Let ...
Implement 24+ array methods in JavaScript by hand
Table of contents 1. Traversal Class 1. forEach 2...
How to write beautiful HTML code
What Beautiful HTML Code Looks Like How to write ...
Solution to Vue3.0 error Cannot find module'worker_threads'
I'll record my first attempt at vue3.0. When ...
Analyze the sql statement efficiency optimization issues of Mysql table reading, writing, indexing and other operations
Last time we talked about some SQL query optimiza...
Detailed explanation of how to create MySql scheduled tasks in navicat
Detailed explanation of creating MySql scheduled ...
Solution to primary key conflict when innodb_index_stats reports an error when importing backup data
Fault description percona5.6, mysqldump full back...
Perfect solution to the problem of Windows Server 2012 or 2016 failing to install .NET Framework 3.5 without disk
Problem Description When using Windows Server 201...
Native JS to achieve digital table special effects
This article shares a digital clock effect implem...
Learn the operating mechanism of jsBridge in one article
Table of contents js calling method Android 1.js ...
Implementation of the list-style-type attribute in front of CSS ordered or unordered lists
example: <html> <head> <style type...
MySQL case when group by example
A mysql-like php switch case statement. select xx...
Detailed explanation of the steps to build a Vue project with Vue-cli
First you need to install Vue-cli: npm install -g...
How to manually scroll logs in Linux system
Log rotation is a very common function on Linux s...