自定義氣泡提示小插件

最近一直在找一個兼容性良好又可以滿足功能而且又不太大的氣泡提示插件，找了許多，試了許多，最後還是決定回過頭自己寫一個小東西，沒有多餘的js，基本是樣式來搞定的，直接上代碼：

HTML：

<div class="btns">
	            		<input id="submitbtn" type="button" class="sbt" value="創建用戶" onclick="dousersbumit();"/>
	            		<!-- 彈出式提示 -->
	            		<div id="registtipdiv" class="_containertip">
		            		<div class="_titlediv">
								<span style="float:left;color:#ffffff;font-weight:bold;margin-left:2px;">提示</span>
							    <span style="float:right;">
								    <a id="registtipa" class="_closetip" href="javascript:_closetip()" title="關閉窗口並登錄"><font color="#ffffff" style="font-weight:bold;
									">x</font></a>
								</span>
							</div>
							<div id="registtipcontent" class="_contenttip"></div>
						</div>
	            	</div>

javascript：

	var registtipdiv=$("#registtipdiv");
	function _closetip(){
		registtipdiv.css("display","none");
		$("#j_username").val($("#username").val());
		$("#j_password").val($("#password").val());
        dosubmit(); 
	}
	function dousersbumit(){
		if($("#username").val()==""||$("#password").val()==""||$("#rpassword").val()==""){
			showMessage('userregisttip','手機號或密碼不能爲空!');
		}else if(!$("#username").val().match(/^1[3|4|5|8][0-9]\d{8}$/)){
				showMessage('userregisttip','手機號碼有誤!');
			}else if($("#password").val()!=$("#rpassword").val()){
				showMessage('userregisttip','兩次輸入密碼不一致!');
				}else{
					$.ajax({
						url:"/activation/cuser",
						timeout:20000,
						type:"POST",
						async:true,
						data :{"activation":$("#jhcode").val(),"username":$("#username").val(),"password":$("#password").val()},
						beforeSend:function(){
							$("#submitbtn").attr('disabled', 'disabled');
						},
						success:function(data){
							if(data.state==1){
								$("#registtipcontent").text(data.message);
								registtipdiv.fadeIn("slow");
							}else{
								$('#submitbtn').removeAttr("disabled");
							    if(data.state==5){
									$("#userregisttip").css('line-height','20px');
								} 
								showMessage('userregisttip',data.message);
								$("#username").focus();
							}
						},
						error:function(data){
							$('#submitbtn').removeAttr("disabled");
							showMessage('userregisttip','驗證出錯,稍等再試!');
						}
					});
				}
	}

 

CSS：

div._containertip{
	display:none;position:absolute;font-size: 12px;height:100px;width:120px;background-color:#EE7600;
	-moz-border-radius: 11px;-khtml-border-radius: 11px;-webkit-border-radius: 11px;border-radius: 11px;
    margin-top: -30px;*+margin-top: 0px;margin-left: 105px;*+margin-left: 0px;overflow:hidden;
}
._closetip{
	position:absolute;text-decoration:none;right:10px;margin-bottom:5px;
}
._contenttip{
	line-height:15px;font-size: 12px;color:#ffffff;margin-top:3px;padding-left:2px;padding-right:2px;
}
._titlediv{
	height:16px;background-color: #FF4500;margin-bottom:2px;padding-top:1px;padding-bottom:2px;moz-border-radius: 11px;-khtml-border-radius: 11px;-webkit-border-radius: 11px;border-radius: 11px;
}

效果如圖：