jquery 弹表单提示效果代码这种效果其实也叫标题 tips教程效果很多时候是在表单或者文本输入框有这样的提示了下面我们提供了下效果图
<style type="text/css教程">
focus
{
border: px solid #fc !important;
background: url(admin/images/focus_bgjpg) repeatx !important;
color: #f !important;
}
/*提示文字样式*/
#hintmsg
{
width: px;
position: absolute;
display: none;
}
#hintmsg hinttop
{
height: px;
background: url(admin/images/hintbggif) norepeat;
overflow: hidden;
}
#hintmsg hintinfo
{
padding: px;
borderleft: px solid #;
borderright: px solid #;
background: #ffffe;
lineheight: em;
}
#hintmsg hintinfo b
{
display: block;
marginbottom: px;
paddingleft: px;
background: url(admin/images/hintgif) left center norepeat;
height: px;
lineheight: px;
}
#hintmsg hintinfo b span
{
display: block;
float: right;
textindent: px;
background: url(admin/images/closegif) norepeat;
width: px;
height: px;
cursor: pointer;
}
#hintmsg hintfooter
{
height: px;
background: url(admin/images/hintbggif) norepeat;
}
</style>
<script>
$(function() {
$("inputlogin_input动画
$("#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( ); //对象的透明度
var hintheight = $("#hintmsg")height(); //取得容器高度
$("#hintmsg")css({ "top": offsettop hintheight + "px" "left": offsetleft + "px" })fadein();
})blur(function(event) {
$("#hintmsg")remove(); //删除ul
});
});
</script>
<form id="form" runat="server">
<div>
<div style="margintop:px">
<asp教程:textbox id="textbox" runat="server" hinttitle="增加的内容信息标题" hintinfo="控制在个字数内标题文本尽量不要太长"></asp:textbox></div>
</div>
</form>
