表单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 相关文章推荐
json跟xml的对比分析
Jun 10 Javascript
jquery 显示*天*时*分*秒实现时间计时器
May 07 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
Oct 10 Javascript
javascript判断回文数详解及实现代码
Feb 03 Javascript
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
ES6使用export和import实现模块化的方法
Sep 10 Javascript
JQuery的加载和选择器用法简单示例
May 13 jQuery
微信小程序页面滚动到指定位置代码实例
Sep 07 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
Sep 29 Javascript
JavaScript交换变量常用4种方法解析
Sep 02 Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 Javascript
在vant中使用时间选择器和popup弹出层的操作
Nov 04 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
PHP数组操作汇总 php数组的使用技巧
2011/07/17 PHP
10个超级有用值得收藏的PHP代码片段
2015/01/22 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
JavaScript 滚轮事件使用说明
2010/03/07 Javascript
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
javascript 实现map集合
2015/04/03 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
Javascript数组循环遍历之forEach详解
2016/11/07 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
vue的事件绑定与方法详解
2017/08/16 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
vue项目中使用vue-layer弹框插件的方法
2020/03/11 Javascript
在vue中实现给每个页面顶部设置title
2020/07/29 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
python文件操作整理汇总
2014/10/21 Python
Python wxPython库Core组件BoxSizer用法示例
2018/09/03 Python
python感知机实现代码
2019/01/18 Python
Python tkinter模版代码实例
2020/02/05 Python
如何编写python的daemon程序
2021/01/07 Python
美国排名第一的泳池用品直接来源:In The Swim
2019/09/23 全球购物
益达广告词
2014/03/14 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
集中整治工作方案
2014/05/01 职场文书
美术教师个人工作总结
2015/02/06 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
python实战之用emoji表情生成文字
2021/05/08 Python
详解Python生成器和基于生成器的协程
2021/06/03 Python