云盟

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz

[网站设计] 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.         }

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






效果图

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

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






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

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|云盟 ( 服务器租用 高防服务器 云服务器租用 亿速云香港5G云支持 )

GMT+8, 2020-11-30 16:25 , Processed in 0.105469 second(s), 24 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表