The realization code of HTML floating prompt box function

Time:2020-1-11

General form prompts always occupy the position of the form, making the side of the form longer or wider, affecting the layout. However, if the prompt box floats beside the required content like a dialog box, this problem can be solved.

HTML and styles

Make a form first

<div id="form-block">
        <h1>Registration</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>

 

And then we need to design a dialog

提示框

That’s about it. It’s made up of a triangle and a rectangle.

 

#tips{
            padding-top: 6px;
            z-index: 9999;
            /*Put the conversation at the top to avoid being 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 hint < / label >
</div>

 

How do triangles come from? Refer to this experience

JS implementation floating

Now that the page is ready, we need a function to change the content and location of the dialog.

 

const TIPS = document.getElementById("tips");
//MSG is the prompt information, obj is the element to prompt
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; // appears after 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 is out of focus
            //Since I use it in the table, I use defocus and modify it as needed
        };
        window.onresize = function (ev) {
            Showtips (MSG, obj); // recalculate the dialog location when the window size changes
        }
    }

 

Design sketch

在这里插入图片描述

Full 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 hint < / label >
</div>
    <div id="form-block">
        <h1>Registration</h1>
        <form id="form-form" class="center-block">
            <div>
                < input onfocus = "showtips ('tips for email ', 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>

summary

The above is the implementation code of HTML floating prompt box introduced by Xiaobian to you. I hope it can help you. If you have any questions, please leave a message to me, and Xiaobian will reply you in time. Thank you very much for your support of the developepaer website!
If you think this article is helpful to you, welcome to reprint, please indicate the source, thank you!