表单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 相关文章推荐
Mootools 1.2教程 定时器和哈希简介
Sep 15 Javascript
javascript实现将文件保存到本地方法汇总
Jul 26 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
Nov 26 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
May 17 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
Nov 09 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
Jan 03 Javascript
React学习笔记之条件渲染(一)
Jul 02 Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 Javascript
Vue 项目代理设置的优化
Apr 17 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
Aug 20 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
Apr 04 Javascript
前端深入理解Typescript泛型概念
Mar 09 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
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
如何在PHP中使用Oracle数据库(4)
2006/10/09 PHP
用PHP实现多服务器共享SESSION数据的方法
2007/03/16 PHP
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
ThinkPHP中自定义错误页面和提示页面实例
2014/11/22 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
javascript 的Document属性和方法集合
2010/01/25 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
原生js做的手风琴效果的导航菜单
2013/11/08 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
2017/08/04 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
2018/08/07 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
2019/02/18 jQuery
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
Django REST为文件属性输出完整URL的方法
2017/12/18 Python
python pytest进阶之fixture详解
2019/06/27 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
利用CSS3制作简单的3d半透明立方体图片展示
2017/03/25 HTML / CSS
PHP如何去执行一个SQL语句
2016/03/05 面试题
竞聘副主任科员演讲稿
2014/01/11 职场文书
会计专业自我鉴定
2014/02/10 职场文书
安全生产实施方案
2014/02/23 职场文书
退休教师欢送会主持词
2014/03/31 职场文书
干部鉴定材料
2014/05/18 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
2014年环境卫生工作总结
2014/11/24 职场文书
电子商务专业求职信范文
2015/03/19 职场文书
工程资料员岗位职责
2015/04/13 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
如何书写读后感?(附范文)
2019/07/26 职场文书
导游词之青岛太清宫
2019/12/13 职场文书
springBoot基于webSocket实现扫码登录
2021/06/22 Java/Android
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL