DDR爱好者之家

html浮动提示框功能的实现代码
站长资源 2024/11/23 佚名
44 1538
DDR爱好者之家 Design By 杰米

一般的表单提示总会占据表单的位置，让表单边长，或者变宽，影响布局，但如果让提示框像对话框一样浮在所需内容旁边就可以解决这一问题。

HTML及样式

首先做一张表单

<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>

 

然后我们需要设计一下对话框

html浮动提示框功能的实现代码

大概就是这样，由一个三角形和矩形组成。

 

  #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">这是一个提示</label>
</div>

 

三角形怎么来的？参考这篇经验

js实现浮动

页面已经做好了，现在我们需要一个函数来改变对话框的内容和位置。

 

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);//当窗口改变大小时重新计算对话框位置
        }
    }

 

效果图

html浮动提示框功能的实现代码

完整代码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">这是一个提示</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浮动提示框功能的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米