您现在的位置是：网站首页> 编程资料编程资料

html浮动提示框功能的实现代码html/css中float浮动的用法实例详解html+css 清除浮动的相关技巧心得Html+CSS浮动的广告条实现分解HTML清除浮动的其中两种方式

2021-08-29 1480人已围观

简介 这篇文章主要介绍了html浮动提示框功能的实现代码,需要的朋友可以参考下

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

HTML及样式

首先做一张表单

注册

 

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

提示框

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

 

 #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; }

 

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

js实现浮动

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

 

 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

 

Title
注册
请输入正确的邮箱地址!

总结

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

上一篇：n个容器元素实现无限滚动的实现代码纯html+css实现Element loading效果纯html+css实现奥运五环的示例代码HTML+CSS实现导航条下拉菜单的示例代码html+css实现滚动到元素位置显示加载动画效果纯html+css实现打字效果html+css实现环绕倒影加载特效html输入两个数实现加减乘除功能html中显示特殊符号(附带特殊字符对应表)关于html选择框创建占位符的问题html css3不拉伸图片显示效果

下一篇：HTML清除浮动的其中两种方式html浮动提示框功能的实现代码html/css中float浮动的用法实例详解html+css 清除浮动的相关技巧心得Html+CSS浮动的广告条实现分解

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网