快活林资源网 Design By www.csstdc.com
一般的表单提示总会占据表单的位置,让表单边长,或者变宽,影响布局,但如果让提示框像对话框一样浮在所需内容旁边就可以解决这一问题。
HTML及样式
首先做一张表单
<div id="form-block"> <h1>注册</h1> <form id="form-form" class="center-block"> <div> <input id="email" class="form-control" placeholder="电子邮箱"> </div> <div> <input id="vrf" class="form-control" placeholder="验证码"> </form> </div> </div>
然后我们需要设计一下对话框
大概就是这样,由一个三角形和矩形组成。
#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; } <div id="alter"> <label id="triangle"></label> <label id="form-alert">这是一个提示</label> </div>
三角形怎么来的?参考这篇经验
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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../static/css/bootstrap.css"> <style> body,html{ background-color: #70a1ff; margin: 0; padding: 0; width: 100%; height: 100%; } body *{ transition-duration: 500ms; } #form-block{ text-align: center; position: absolute; top: 50%; left: 50%; width: 500px; height: 200px; background-color: #f1f2f6; transform: translateY(-50%) translateX(-50%); box-shadow: 0 0 10px #000000; } #form-form{ width: 70%; } #form-form > *{ margin: 10px; } #email-warning{ display: none; } #tips{ padding-top: 6px; ds 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; } </style> </head> <body> <div id="tips"> <label id="triangle"></label> <label id="form-tips">这是一个提示</label> </div> <div id="form-block"> <h1>注册</h1> <form id="form-form" class="center-block"> <div> <input onfocus="showTips('电子邮箱的提示',this)" id="email" class="form-control" placeholder="电子邮箱"> <div id="email-warning" class="label-warning">请输入正确的邮箱地址!</div> </div> <div> <input onfocus="showTips('测试文字', this)" id="vrf" class="form-control" placeholder="验证码"> <div id="vrf-warning" class="label-warning hidden">请输入正确的邮箱地址!</div> </div> </form> </div> <!-- <button οnclick="changeFormHeight('500')">测试</button>--> <script> const TIPS = document.getElementById("tips"); 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); } } </script> </body> </html>
总结
以上所述是小编给大家介绍的html浮动提示框功能的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
快活林资源网 Design By www.csstdc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
快活林资源网 Design By www.csstdc.com
暂无评论...
更新日志
2024年05月20日
2024年05月20日
- 林一峰2017-绝对清白2CD[香港首版][WAV+CUE
- 石凯《数星一整夜》[320K/MP3][44.18MB]
- 石凯《数星一整夜》[24bit 48kHz][FLAC/分轨][395.49MB]
- 邰正宵《重燃爱恋 贰 Walk On》[320K/MP3][158.71MB]
- 林一峰2003-床头歌[华纳][WAV+CUE]
- 张琍敏1983-又见牵手[台湾留声复刻版][WAV+CUE]
- 张琍敏1978-雪中莲[台湾复刻版][WAV+CUE]
- 叶蕴仪1993-睡美人[日本版][WAV+CUE]
- 夜晚助兴音乐-群星《新时代床头音乐-性能量》2CD[WAV]
- 24K德国HD金碟《历届奥斯卡获奖金曲》3CD[WAV整轨]
- 邰正宵《重燃爱恋 贰 Walk On》[FLAC/分轨][431.72MB]
- 苏文劭《雨停出来走走》[320K/MP3][81.11MB]
- 苏文劭《雨停出来走走》[FLAC/分轨][210.76MB]
- 群星《2024好听新歌04》十倍音质WAV分轨
- 陈宁《弹指之间HQ》头版限量[低速原抓WAV+CUE]