表单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 相关文章推荐
翻译整理的jQuery使用查询手册
Mar 07 Javascript
JavaScript库 开发规则
Jan 31 Javascript
简单实用的反馈表单无刷新提交带验证
Nov 15 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 Javascript
bootstrap实现弹窗和拖动效果
Jan 03 Javascript
Javascript 实现放大镜效果实例详解
Dec 03 Javascript
函数四种调用模式以及其中的this指向
Jan 16 Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
Apr 13 Javascript
详解Vue源码中一些util函数
Apr 24 Javascript
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
纯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
php中取得文件的后缀名?
2012/02/20 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
Laravel学习教程之路由模块
2017/08/18 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
JavaScript如何一次性展示几万条数据
2017/03/30 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
JS中的回调函数实例浅析
2018/03/21 Javascript
微信小程序中进行地图导航功能的实现方法
2018/06/29 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
Echarts动态加载多条折线图的实现代码
2019/05/24 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
2019/06/13 Javascript
js实现简单掷骰子效果
2019/10/24 Javascript
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
ES6函数和数组用法实例分析
2020/05/23 Javascript
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
[00:34]TI7不朽珍藏III——地穴编织者不朽展示
2017/07/15 DOTA
Python3实现从文件中读取指定行的方法
2015/05/22 Python
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
Python常用时间操作总结【取得当前时间、时间函数、应用等】
2017/05/11 Python
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
python游戏开发之视频转彩色字符动画
2019/04/26 Python
Django的性能优化实现解析
2019/07/30 Python
pytest中文文档之编写断言
2019/09/12 Python
使用python求解二次规划的问题
2020/02/29 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
浅谈Python中的模块
2020/06/10 Python
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
JMS中Topic和Queue有什么区别
2013/05/15 面试题
社区端午节活动方案
2014/01/28 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
新生儿未入户证明
2015/06/23 职场文书
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记