表单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 相关文章推荐
js检测客户端不是firefox则提示下载
Apr 07 Javascript
JavaScript中的一些定位属性[图解]
Jul 14 Javascript
ajax请求get与post的区别总结
Nov 04 Javascript
javascript中打印当前的时间实现思路及代码
Dec 18 Javascript
js实现网页收藏功能
Dec 17 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
Aug 01 Javascript
node.js 发布订阅模式的实例
Sep 10 Javascript
template.js前端模板引擎使用详解
Oct 10 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
Apr 13 Javascript
JS数组求和的常用方法实例小结
Jan 07 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
Sep 20 Javascript
Vue Mint UI mt-swipe的使用方式
Jun 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 zend解密软件绿色版测试可用
2008/04/14 PHP
PHP根据IP判断地区名信息的示例代码
2014/03/03 PHP
php导入excel文件到mysql数据库的方法
2015/01/14 PHP
php生成动态验证码gif图片
2015/10/19 PHP
解读IE和firefox下JScript和HREF的执行顺序
2008/01/12 Javascript
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
javascript实现unicode与ASCII相互转换的方法
2015/12/10 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
Python中实现结构相似的函数调用方法
2015/03/10 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
使用python的pandas为你的股票绘制趋势图
2019/06/26 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
Python matplotlib画图时图例说明(legend)放到图像外侧详解
2020/05/16 Python
python按顺序重命名文件并分类转移到各个文件夹中的实现代码
2020/07/21 Python
python 实现关联规则算法Apriori的示例
2020/09/30 Python
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
丝芙兰新加坡官网:Sephora新加坡
2018/12/04 全球购物
DERMAdoctor官网:美国著名皮肤护理品牌
2019/07/06 全球购物
英国发展最快的在线超市之一:Click Marketplace
2021/02/15 全球购物
东方红海科技面试题软件测试方面
2012/02/08 面试题
我的网上商城创业计划书
2013/12/26 职场文书
幼儿园秋游活动方案
2014/01/21 职场文书
医务人员自我评价
2014/01/26 职场文书
表扬稿范文
2015/01/17 职场文书
财务统计员岗位职责
2015/04/14 职场文书
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang