html波动提醒框作用的完成编码

1般的表单提醒总会占有表单的部位，让表单侧长，或变宽，危害合理布局，但假如让提醒框像会话框1样浮在所需內容周围便可以处理这1难题。

HTML及款式

最先做1张表单

<div id="form-block">
        <h1>申请注册</h1>
        <form id="form-form" class="center-block">
            <div>
                <input id="email" class="form-control" placeholder="电子器件电子邮箱">
            </div>
            <div>
                <input id="vrf" class="form-control" placeholder="认证码">
        </form>
    </div>
</div>

 

随后大家必须设计方案1下会话框

大约便是这样，由1个3角形和矩形框构成。

 

  #tips{
            padding-top: 6px;
            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;
        }

<div id="alter">
    <label id="triangle"></label>
    <label id="form-alert">这是1个提醒</label>
</div>

 

3角形如何来的？参照这篇工作经验

js完成波动

网页页面早已做好了，如今大家必须1个涵数来更改会话框的內容和部位。

 

const TIPS = document.getElementById("tips");
//msg是提醒信息内容，obj是必须提醒的元素
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);//当对话框更改尺寸时再次测算会话框部位
        }
    }

 

实际效果图

详细编码d

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <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(⑸0%) translateX(⑸0%);
            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">这是1个提醒</label>
</div>
    <div id="form-block">
        <h1>申请注册</h1>
        <form id="form-form" class="center-block">
            <div>
                <input onfocus="showTips('电子器件电子邮箱的提醒',this)" id="email" class="form-control" placeholder="电子器件电子邮箱">
                <div id="email-warning" class="label-warning">请键入正确的电子邮箱详细地址!</div>
            </div>
            <div>
                <input onfocus="showTips('检测文本', this)" id="vrf" class="form-control" placeholder="认证码">
                <div id="vrf-warning" class="label-warning hidden">请键入正确的电子邮箱详细地址!</div>
            </div>
        </form>
    </div>
<!--    <button οnclick="changeFormHeight('500')">检测</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>

总结

以上所述是网编给大伙儿详细介绍的html波动提醒框作用的完成编码，期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！
假如你感觉本文对你有协助，欢迎转载，烦请注明出处，感谢！