登录 注册
快捷登录
共享VIP立即开通
原创VIP立即开通
办公VIP立即开通
超级VIP立即开通
企业VIP立即开通
云盟 › 站长论坛 › 开发设计 › html浮动提示框功能的实现代码
返回列表 发新帖

[网站设计] html浮动提示框功能的实现代码

[复制链接]
云盟 发表于 2020-1-6 17:58:37 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 

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

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>
复制代码




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

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


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

  19. <div id="alter">
  20.     <label id="triangle"></label>
  21.     <label id="form-alert">这是一个提示</label>
  22. </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.     }
复制代码






效果图

baidu_jgylogo3 (1).gif

完整代码d


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

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

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

总结

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






标签：htmlDDOSHosts

关联主题

高防服务器,棋牌高防服务器,游戏高防服务器,bgp高防服务器,美国高防服务器,香港高防服务器,租用服务器,高防服务器租用,高防服务器出租,高防IP
回复

使用道具 举报

 
返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

云盟管理员

0关注

0粉丝

92帖子

热门图文
热门帖子
排行榜
  • 日
  • 周
  • 月

关注我们：微信订阅号

官方微信

APP下载

全国服务热线：

2020-018-018

公司地址：上海市嘉定区银翔路20号B区2020室

运营中心：成都市锦江区东华正街2020号广电仕百达国际大厦2020楼

邮编：2020 Email：2818466886#qq.com

Copyright   ©2015-2016  云盟Powered by©Discuz!技术支持：云盟网络     ( 一个收集国内外最新最全的VPS、云服务器、网络工具的网址导航服务器租用 高防服务器 云服务器租用 亿速云香港5G云支持 )