自定义点击弹框

Jquery

html

           

               

                   

                       
余额不足
                       

                   
                   

                       
32165465
                       前往充值
                   
               
           
       

js

$('.c').click(function(){
     $('.ibox').hide();
  })

css

.box-d{width:402px;height:250px;position:fixed;top:50%;left:50%;margin-top:-201px;margin-left:-125px;}
           .tit{height:60px;line-height:60px;color:#fff;font-size:16px;background:#fd5e5e;}
           .tit h4{float:left;padding-left:20px;}
           .tit .c{float:right;width:60px;height:60px;background:url(/public/static/img/close.png) no-repeat center center;cursor:pointer;}
           .tit .c:hover{opacity:0.6;filter:alpha(opacity=60);}
           .ercon{height:190px;background:#fff;width:100%;}
           .ercon p{padding:40px 0;text-align:center;font-size:16px;}
           .ercon a{margin-top:20px;margin-left:23%;width:50%;}

---

html

	

		

			
约标进度
			
X
		
		

			

				

					

						提交审核
					
					

					

						审核中
					
					

					

						审核成功
					
				
			
			

				预计审核通过
			
		
	

JS

//关闭计算收益弹窗
$("#clos").on("tap", function(e){
	e.stopPropagation();
	e.preventDefault();
	$(".logbox-wrap").hide();
	$("#amount").val("");
	$("#days").val("")
	$("#sy").text("")
});

---

活动规则弹出层

html

    

        

            活动规则
            
X
        
        

            

                1、活动时间：6月14日-7月15日

                2、比赛开始前1个小时停止该场次的竞猜。

                3、用户赢取的积分会在下一个工作日发放。

                4、赢取的积分可用于兑换积分商城的商品
（查看）。

                5、如有任何疑问，请咨询小狗钱钱客服，
客服电话：400-0000-000。
            
        
    

/*==弹出层==*/
.rules-box-wrap{width:100%;height:100%;position: absolute;top:0;bottom:0;left: 0;right:0;z-index: 12;box-sizing: border-box;background-color:rgba(0,0,0,0.6); padding: 0 2.6rem;}
.rules-box{width:100%;background:#F6F6F6; overflow: hidden;border-radius: 0.3rem;position: relative;top:21%; padding:0.2rem 0rem 1.2rem;}
.rules-box .rules-titl{height:2.933333333333333rem;text-align: center;line-height: 2.933333333333333rem;font-size: 1.1333333333333333rem;color:#444;}
.clos-but{ position: absolute; top: 0; right: 0;}
.rules-con{ font-size: 0.78rem; line-height: 1.8; }
.rules-mx{ padding-left: 1rem; }
.rules-mx a{ color: #247849; }

Js

//点击弹窗
$("#rules").on("tap", function(e){
		e.stopPropagation();
		e.preventDefault();
		$(".rules-box-wrap").show();
});
//关闭弹窗
$("#clos").on("tap", function(e){
		e.stopPropagation();
		e.preventDefault();
		$(".rules-box-wrap").hide();
});