表单JS弹出填写提示效果代码


Posted in Javascript onApril 16, 2011

HTML

<form id="form1" runat="server"> 
<div> 
<div style="margin-top:100px"> 
<asp:TextBox ID="TextBox1" runat="server" HintTitle="增加的内容信息标题" HintInfo="控制在100个字数内,标题文本尽量不要太长。"></asp:TextBox></div> 
</div> 
</form>

页面中的样式
<style type="text/css"> 
.focus 
{ 
border: 1px solid #FC0 !important; 
background: url(Admin/Images/focus_bg.jpg) repeat-x !important; 
color: #00F !important; 
} 
/*提示文字样式*/ 
#HintMsg 
{ 
width: 271px; 
position: absolute; 
display: none; 
} 
#HintMsg .HintTop 
{ 
height: 9px; 
background: url(Admin/Images/hintbg1.gif) no-repeat; 
overflow: hidden; 
} 
#HintMsg .HintInfo 
{ 
padding: 0 5px; 
border-left: 1px solid #000; 
border-right: 1px solid #000; 
background: #FFFFE1; 
line-height: 1.5em; 
} 
#HintMsg .HintInfo b 
{ 
display: block; 
margin-bottom: 6px; 
padding-left: 15px; 
background: url(Admin/Images/hint.gif) left center no-repeat; 
height: 13px; 
line-height: 16px; 
} 
#HintMsg .HintInfo b span 
{ 
display: block; 
float: right; 
text-indent: -9999px; 
background: url(Admin/Images/close.gif) no-repeat; 
width: 12px; 
height: 12px; 
cursor: pointer; 
} 
#HintMsg .HintFooter 
{ 
height: 22px; 
background: url(Admin/Images/hintbg2.gif) no-repeat; 
} 
</style>

关键JS
$(function() { 
$(".input,.login_input,.textarea").focus(function() { 
$(this).addClass("focus"); 
}).blur(function() { 
$(this).removeClass("focus"); 
}); 
//输入框提示,获取拥有HintTitle,HintInfo属性的对象 
$("[HintTitle],[HintInfo]").focus(function(event) { 
$("*").stop(); //停止所有正在运行的动画 
$("#HintMsg").remove(); //先清除,防止重复出错 
var HintHtml = "<ul id=\"HintMsg\"><li class=\"HintTop\"></li><li class=\"HintInfo\"><b>" + $(this).attr("HintTitle") + "</b>" + $(this).attr("HintInfo") + "</li><li class=\"HintFooter\"></li></ul>"; //设置显示的内容 
var offset = $(this).offset(); //取得事件对象的位置 
$("body").append(HintHtml); //添加节点 
$("#HintMsg").fadeTo(0, 0.85); //对象的透明度 
var HintHeight = $("#HintMsg").height(); //取得容器高度 
$("#HintMsg").css({ "top": offset.top - HintHeight + "px", "left": offset.left + "px" }).fadeIn(500); 
}).blur(function(event) { 
$("#HintMsg").remove(); //删除UL 
}); 
});

效果图:

 表单JS弹出填写提示效果代码

以上内容来子一个下载的网站,具体的名字忘记了....仅作参考

Javascript 相关文章推荐
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 Javascript
js实现单行文本向上滚动效果实例代码
Nov 28 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 Javascript
js控制iframe的高度/宽度让其自适应内容
Apr 09 Javascript
javascript的创建多行字符串的7种方法
Apr 29 Javascript
谈谈对offsetleft兼容性的理解
Nov 11 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
Jun 06 Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 Javascript
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 Javascript
分析javascript原型及原型链
Mar 18 Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 Javascript
vue文件运行的方法教学
Feb 12 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
Apr 16 #Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
Apr 16 #Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
Apr 14 #Javascript
js网页侧边随页面滚动广告效果实现
Apr 14 #Javascript
jquery下jstree简单应用 - v1.0
Apr 14 #Javascript
JQuery之拖拽插件实现代码
Apr 14 #Javascript
jQuery创建插件的代码分析
Apr 14 #Javascript
You might like
apache php模块整合操作指南
2012/11/16 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
Laravel5.7 Eloquent ORM快速入门详解
2019/04/12 PHP
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
Js nodeType 属性全面解析
2013/11/14 Javascript
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
javascript检查浏览器是否支持flash的实现代码
2014/08/14 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
2016/05/25 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
微信小程序自定义弹出层效果
2020/05/26 Javascript
浅谈es6中的元编程
2020/12/01 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
Python ftp上传文件
2016/02/13 Python
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
python调用staf自动化框架的方法
2018/12/26 Python
Python3.5基础之变量、数据结构、条件和循环语句、break与continue语句实例详解
2019/04/26 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
软件测试企业面试试卷
2016/07/13 面试题
个性大学生自我评价
2013/12/04 职场文书
面料业务员岗位职责
2013/12/26 职场文书
领导干部培训感言
2014/01/23 职场文书
消防宣传口号
2014/06/16 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang