IT俱乐部 HTML html浮动提示框功能的实现代码

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

发布: 2024年 9月 18日 562阅读

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

HTML及样式

首先做一张表单

1
2
3
4
5
6
7
8
9
10
11
<div id="form-block">
        <h1>注册</h1>
         
            <div>
                 
</div>
            <div>
                 
</div>
 
</div>

 

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

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

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
  #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实现浮动

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

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
    <title>Title</title>
        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;
        }
    <div id="tips">
    <label id="triangle"></label>
    <label id="form-tips">这是一个提示</label>
</div>
    <div id="form-block">
        <h1>注册</h1>
         
            <div>
                <div id="email-warning" class="label-warning">请输入正确的邮箱地址!</div>
            </div>
            <div>
                <div id="vrf-warning" class="label-warning hidden">请输入正确的邮箱地址!</div>
            </div>
         
    </div>
 
 
    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);
        }
    }

总结

以上所述是小编给大家介绍的html浮动提示框功能的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对IT俱乐部网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

本文收集自网络，不代表IT俱乐部立场，转载请注明出处。https://www.2it.club/navsub/html/13606.html
41赞
标签:
上一篇
下一篇

相关推荐

联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间：周一至周五，9:00-17:30，节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部