Form JS pop-up fill hint effect code _ form effects

HTML

Copy Code code as follows:

<form id= "Form1" runat= "Server" >
<div>
<div style= "margin-top:100px" >
<asp:textbox id= "TextBox1" runat= "server" hinttitle= "added content information title" hintinfo= "Control in 100 words, the title text as far as possible not too long. "></asp:TextBox></div>
</div>
</form>

styles in a page

Copy Code code as follows:

<style type= "Text/css" >
. Focus
{
border:1px solid #FC 0!important;
Background:url (admin/images/focus_bg.jpg) repeat-x!important;
Color: #00F!important;
}
/* hint Text style * *
#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>

Key JS

Copy Code code as follows:

$ (function () {
$ (". Input,.login_input,.textarea"). focus (function () {
$ (this). AddClass ("Focus");
}). blur (function () {
$ (this). Removeclass (' Focus ');
});
//input box prompt to get the object with the Hinttitle,hintinfo property
$ ([Hinttitle],[hintinfo]). Focus (Function (event) {
$ ("*"). Stop () ; Ttop\ "></li><li class=\" hintinfo\ "><b>" + $ (This). attr ("Hinttitle") + "</b>" + $ (this). attr ("Hintinfo") + "</li><li class=\" Hintfooter\ "></li></ul>"; Set the displayed content
var offset = $ (this). offset ();//Get the location of the event object
$ ("Body"). Append (hinthtml);//Add node
$ ("#HintMsg"). FA Deto (0, 0.85); object's Transparency
var hintheight = $ ("#HintMsg"). Height ();//Get container height
$ ("#HintMsg"). CSS ({"Top": offset.top-hintheight + "px", "left": Offset.left + "px"}). FadeIn (500);
}). blur (FunctioN (Event) {
$ ("#HintMsg"). Remove ();//Remove UL
);
});

Effect Chart:

The above content to son a download website, the specific name forgot .... For reference only