欢迎来到站长教程网!

HTML/Xhtml

当前位置:主页 > 网页制作 > HTML/Xhtml >

html浮动提示框功能的实现代码

时间:2020-04-15|栏目:HTML/Xhtml|点击:

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

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>

总结

上一篇:超链接 a href 通过post方式提交表单的方法

栏    目:HTML/Xhtml

下一篇:HTML清除浮动的其中两种方式

本文标题:html浮动提示框功能的实现代码

本文地址:http://www.blue1000.com/wangyezhizuo/HTML_Xhtml/184.html

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:1961407250 | 邮箱:1961407250#qq.com(#换成@)

Copyright © 2002-2022 BK网络学院版权所有 Power by DedeCms 粤ICP备19027147号-7