源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 7790|回复: 0

[CSS/Html] html实现浮动提示框功能的代码

[复制链接]

1169

主题

1557

帖子

8820

金币

超级版主

Rank: 8Rank: 8

积分
19323
发表于 2020-2-9 19:43:31 | 显示全部楼层 |阅读模式
这篇文章主要介绍了html浮动提示框功能的实现代码,需要的朋友可以参考下

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

HTML及样式

首先做一张表单

  1. <div id="form-block">
  2.         <h1>注册</h1>
  3.         <form id="form-form" class="center-block">
  4.             <div>
  5.                 <input id="email" class="form-control" placeholder="电子邮箱">
  6.             </div>
  7.             <div>
  8.                 <input id="vrf" class="form-control" placeholder="验证码">
  9.         </form>
  10.     </div>
  11. </div>
复制代码


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

2019110511211511.png


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

  1. #tips{
  2.             padding-top: 6px;
  3.             z-index: 9999;
  4.             /*让对话置顶以免被其他元素遮挡*/
  5.             position: fixed;
  6.             width: 1000px;
  7.         }
  8.         #form-tips{
  9.             background-color: black;
  10.             color: #ffffff;
  11.             padding: 0 6px;
  12.             position: absolute;
  13.         }
  14.         #triangle{
  15.             border:10px solid;
  16.             border-color: transparent black transparent transparent;
  17.         }

  18. <div id="alter">
  19.     <label id="triangle"></label>
  20.     <label id="form-alert">这是一个提示</label>
  21. </div>
复制代码


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

js实现浮动

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

  1. const TIPS = document.getElementById("tips");
  2. //msg是提示信息,obj是需要提示的元素
  3. function showTips(msg, obj) {
  4.         TIPS.style.display = "block";//显示隐藏的对话框
  5.         var domRect = obj.getBoundingClientRect();//获取元素的位置信息
  6.         var width = domRect.x+obj.clientWidth; //显示在元素后面,所以加上元素的宽
  7.         var height = domRect.y;
  8.         TIPS.style.top = height+"px";
  9.         TIPS.style.left = width+"px";
  10.         document.getElementById("form-tips").innerHTML = msg; //改变对话框文字
  11.         obj.onblur = function () {
  12.             TIPS.style.display = "none";//元素失焦时隐藏对话框
  13.             //这里由于我是用在表格,所以使用了失焦,根据需要修改
  14.         };
  15.         window.onresize = function (ev) {
  16.             showTips(msg, obj);//当窗口改变大小时重新计算对话框位置
  17.         }
  18.     }
复制代码


效果图

2019110511211512.gif


完整代码如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="../static/css/bootstrap.css">
  7.     <style>
  8.         body,html{
  9.             background-color: #70a1ff;
  10.             margin: 0;
  11.             padding: 0;
  12.             width: 100%;
  13.             height: 100%;
  14.         }
  15.         body *{
  16.             transition-duration: 500ms;
  17.         }
  18.         #form-block{
  19.             text-align: center;
  20.             position: absolute;
  21.             top: 50%;
  22.             left: 50%;
  23.             width: 500px;
  24.             height: 200px;
  25.             background-color: #f1f2f6;
  26.             transform: translateY(-50%) translateX(-50%);
  27.             box-shadow: 0 0 10px #000000;
  28.         }
  29.         #form-form{
  30.             width: 70%;
  31.         }

  32.         #form-form > *{
  33.             margin: 10px;
  34.         }

  35.         #email-warning{
  36.             display: none;
  37.         }
  38.         #tips{
  39.             padding-top: 6px; ds
  40.             z-index: 9999;
  41.             position: fixed;
  42.             width: 1000px;
  43.         }
  44.         #form-tips{
  45.             background-color: black;
  46.             color: #ffffff;
  47.             padding: 0 6px;
  48.             position: absolute;
  49.         }
  50.         #triangle{
  51.             border:10px solid;
  52.             border-color: transparent black transparent transparent;
  53.         }
  54.     </style>
  55. </head>
  56. <body>
  57. <div id="tips">
  58.     <label id="triangle"></label>
  59.     <label id="form-tips">这是一个提示</label>
  60. </div>
  61.     <div id="form-block">
  62.         <h1>注册</h1>
  63.         <form id="form-form" class="center-block">
  64.             <div>
  65.                 <input onfocus="showTips('电子邮箱的提示',this)" id="email" class="form-control" placeholder="电子邮箱">
  66.                 <div id="email-warning" class="label-warning">请输入正确的邮箱地址!</div>
  67.             </div>
  68.             <div>
  69.                 <input onfocus="showTips('测试文字', this)" id="vrf" class="form-control" placeholder="验证码">
  70.                 <div id="vrf-warning" class="label-warning hidden">请输入正确的邮箱地址!</div>
  71.             </div>
  72.         </form>
  73.     </div>
  74. <!--    <button οnclick="changeFormHeight('500')">测试</button>-->
  75. <script>
  76.     const TIPS = document.getElementById("tips");
  77.     function showTips(msg, obj) {
  78.         TIPS.style.display = "block";
  79.         var domRect = obj.getBoundingClientRect();
  80.         var width = domRect.x+obj.clientWidth;
  81.         var height = domRect.y;
  82.         TIPS.style.top = height+"px";
  83.         TIPS.style.left = width+"px";
  84.         document.getElementById("form-tips").innerHTML = msg;
  85.         obj.onblur = function () {
  86.             TIPS.style.display = "none";
  87.         };
  88.         window.onresize = function (ev) {
  89.             showTips(msg, obj);
  90.         }
  91.     }
  92. </script>
  93. </body>
  94. </html>
复制代码


总结

以上所述是小编给大家介绍的html浮动提示框功能的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对锦尚中国源码论坛的支持!

如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!


您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-6-23 05:49 , Processed in 0.129264 second(s), 33 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明