页面控件自定义错误提示框

最近又做回web前端的项目，使用的框架没有太多的功能，类似Message，错误提示，等等都需要自己手写，于是，就手动一个错误提示的方法，供大家参考。

.infotip {
	margin-top: 10px;
	position: absolute;
	display: inline-block; //限制长度
	height: 30px;
	line-height: 32px;
	background: white;
	box-shadow: 1px 2px 3px red; //阴影部分
	border: 1px solid red;
	border-radius: 4px; /圆角
	text-align: center;
	color: red;
	padding: 2px; //
}

// 小三角
.navtip {
	position: absolute; //可以脱离父层
	top: -6px;
	left: 15px;
	overflow: hidden;
	width: 10px;
	height: 10px;
	background: white;
	border-left: 1px solid red;
	border-top: 1px solid red;
	-webkit-transform: rotate(45deg); //旋转45度
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}


//message tip
function messageTip(obj , msg) //obj 控件id
{
	$(obj).css('outline','2px solid red') //红框
	$(obj).focus(); //焦点
	$('body').append("<div id='tipDiv' class='infotip'><span id='spanTip'></span><div class='navtip'></div></div>");
    $('#tipDiv').show().css("left", $(obj).offset().left + $(obj).width() + 'px').css("top", $(obj).offset().top + 26 + 'px').css('z-index', '9999'); //相对于控件的位置
    $('#spanTip').html(msg); //错误内容
    $(obj).blur(function () { //获得焦点时错误信息消失
    	$(obj).removeAttr("style"); 
    	$('#tipDiv').remove();
    });
}