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

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
});
});

效果图:

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

if ($ != jQuery) {
$ = jQuery.noConflict();
}
var isLogined = false;
var cb_blogId = 86983;
var cb_entryId = 2018093;
var cb_blogApp = "zzjjgg";
var cb_blogUserGuid = "6fc04d64-a768-df11-ba8f-001cf0cd104b";
var cb_entryCreatedDate = '2011/4/16 13:16:00';

(0)

相关推荐

  • 离开页面时检测表单元素是否被修改,提示保存的js代码

    复制代码 代码如下: window.onbeforeunload = function() { if(is_form_changed()) { return "您的修改内容还没有保存,您确定离开吗?"; } } function is_form_changed() { var t_save = jQuery("#t_save"); //检测页面是否要保存按钮 if(t_save.length>0) { //检测到保存按钮,继续检测元素是否修改 var is_c

  • js+css实现增加表单可用性之提示文字

    平常设计表单的时候,我们会加入一些提示文字,比如说在搜索框里,我们会提示"请输入关键字",并在搜索框得到焦点和失去焦点的时候适时的隐藏和显示,最常见的做法是利用value来设置: 复制代码 代码如下: <form id="search"> <input type="text" id="keyword" name="keyword" value="请输入关键字">

  • 强效、方便的表单通用检测JS 不错

    // 表单通用检测JS by www.it2048.com 整理/制作 H.Q.J 2007/1/10 //自定义属性解释(IE支持): //ii_chname:表示该数据的中文名称 //ii_minsize:表示允许输入的最小长度,单位字节 //ii_maxsize:表示允许输入的最大长度,单位字节 //ii_type:输入的数据类型 //ii_null:表示输入值是否允许为空.为yes时允许为空. //ii_compare:比交是否与某项(ID)值相同 function chkRadio(o

  • JS实现跟随鼠标的链接文字提示框效果

    本文实例讲述了JS实现跟随鼠标的链接文字提示框效果.分享给大家供大家参考.具体如下: 这里使用JavaScript与CSS实现链接提示效果,不会改变你原来的链接结构,使用链接原有的title标签来实现,如果之前你使用有title标签,那你几乎只需把JS代码拷贝到你的网页中即可.你会发现,运行本效果后,鼠标在链接上移动的话,文字提示框会跟随鼠标而移动位置. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran

  • js实现仿网易点击弹出提示同时背景变暗效果

    本文实例讲述了js实现仿网易点击弹出提示同时背景变暗效果.分享给大家供大家参考.具体如下: 这里仿网易点击弹出提示,背景变暗提示层效果,圆角,美观简洁,代码稍嫌多. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-sina-dialog-bgcolor-codes/ 具体代码如下: <html> <head> <title>点击弹出提示,背景变暗</title> <script> func

  • JS实现定时自动关闭DIV层提示框的方法

    本文实例讲述了JS实现定时自动关闭DIV层提示框的方法.分享给大家供大家参考.具体分析如下: 这里用JS设定时间去控制指定ID的DIV层是否显示,可以实现一个自动关闭的提示框,时间一到,马上关闭,这样会使你的网页更人性一点,代码其实比你想像的还要简单,就一行代码. <title>自动关闭的DIV层</title> <body onLoad=setTimeout("abc.style.display='none'",5000)> <div id=

  • js实现表单检测及表单提示的方法

    本文实例讲述了js实现表单检测及表单提示的方法.分享给大家供大家参考.具体如下: 这是个实用的表单判断以及表单提示效果,如果点击需要输入文字的时候,提示就会跑出来,提示框的形状比较个性化,有一个三角符号指向输入框,有两张图片需要下载. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-table-check-form-tips-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM

  • JS实现统计复选框选中个数并提示确定与取消的方法

    本文实例讲述了JS实现统计复选框选中个数并提示确定与取消的方法.分享给大家供大家参考.具体实现方法如下: javascript部分如下: <script type="text/javascript"> function yesno() { var inputs = document.getElementsByName("ck[]"); var checked_counts = 0; for(var i=0;i<inputs.length;i++){

  • js下在password表单内显示提示信息的解决办法

    经典有人要这个代码,考虑到password中输入的内容会显示为*号,所以要想办法解决*的问题.当初想用setAttribute动态修改type属性达到效果,再ff下测试成功,但没想到setAttribute对type属性的修改在ie中无效.最终采用背景图片的方式解决了这个.即为password设定一个背景图片,图片文字为提示信息 如:<img src="http://files.jb51.net/upload/20070819124037566.gif" />, 当鼠标放上

  • 实用的JS表单验证提示效果

    errMsg 是一个错误消息的数组,这样方便自定义,errName是对应错误信息元件名数组,这样可以非富自定义显示方式,FormValid.allName记录了所有有验证规则的字段名数级,在自定义中可以使用到. 表单验证提示效果 body{ color:#666666; font-size:12px} h1{ font-size:20px;} input{ border:#999999 1px solid; background-color:#FFFFEE} .button2{ backgrou

随机推荐