最近一直在找一个兼容性良好又可以满足功能而且又不太大的气泡提示插件,找了许多,试了许多,最后还是决定回过头自己写一个小东西,没有多余的js,基本是样式来搞定的,直接上代码:
HTML:
<div class="btns">
<input id="submitbtn" type="button" class="sbt" value="创建用户" οnclick="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;
}
效果如图: