自定义点击弹框

Jquery

html

<div class="ibox" style="position:absolute;top:0;left:0;background:rgba(0,0,0,0.5);width:100%;height:100%;z-index:9999;display:none;">
           <div class="ui-grid box-d">
               <div class="err">
                   <div class="tit fix">
                       <h4>余额不足</h4>
                       <div class="c"></div>
                   </div>
                   <div class="ercon">
                       <p >32165465</p>
                       <a  id="gorechange" class="ui-btn">前往充值</a>
                   </div>
               </div>
           </div>
       </div>

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

<div class="logbox-wrap" style="display:none;">
	<div class="logbox">
		<div class="log-titl">
			<h2 class="fl">约标进度</h2>
			<div class="fr" id="clos" style="width:3rem;height:3rem;color:#8c96a7;text-align:center">X</div>
		</div>
		<div class="log-con">
			<div class="con-1">
				<ul class="fix">
					<li class="active">
						<span>提交审核</span>
					</li>
					<hr class="fl active">
					<li class="active">
						<span>审核中</span>
					</li>
					<hr class="fl">
					<li>
						<span>审核成功</span>
					</li>
				</ul>
			</div>
			<div class="con-2">
				预计<span id="times"></span>审核通过
			</div>
		</div>
	</div>
</div>

JS

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

---

活动规则弹出层

html

<!-- 活动规则 -->
<div class="rules-box-wrap" style="display: none;">
    <div class="rules-box">
        <div class="rules-titl">
            活动规则
            <div class="fr clos-but" id="clos" style="width:3rem;height:3rem;color:#8c96a7;text-align:center">X</div>
        </div>
        <div class="rules-con">
            <div class="rules-mx">
                1、活动时间：6月14日-7月15日<br/>
                2、比赛开始前1个小时停止该场次的竞猜。<br/>
                3、用户赢取的积分会在下一个工作日发放。<br/>
                4、赢取的积分可用于兑换积分商城的商品<br/><a href="#">（查看）</a>。<br/>
                5、如有任何疑问，请咨询小狗钱钱客服，<br/>客服电话：400-0000-000。
            </div>
        </div>
    </div>
</div>
/*==弹出层==*/
.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();
});