云盟

标题: html浮动提示框功能的实现代码 [打印本页]
作者: 云盟    时间: 2020-1-6 17:58
标题: 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>
复制代码




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

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


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






效果图

(, 下载次数: 0)