自定义气泡提示小插件

3 篇文章 0 订阅
1 篇文章 0 订阅

最近一直在找一个兼容性良好又可以满足功能而且又不太大的气泡提示插件,找了许多,试了许多,最后还是决定回过头自己写一个小东西,没有多余的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;
}


效果如图:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值