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

Tips 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

insert image description here

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!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!

<<: Detailed Example of JavaScript Array Methods

>>: Example code for css3 to achieve scroll bar beautification effect