<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>熊猫美妆红包</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="css/bindtel.css"/>
    <link rel="stylesheet" href="css/bomb.css"/>
</head>
<body>
<div class="fullPage" id="fullPage">
    <div class="top">
        <div class="center_box">
            <div class="ropes center font14">
                <s class="tel inline middle"></s><span>绑定礼包</span>
            </div>
            <div class="amount_box center">
                <span class="amount_title inline font12">代金券</span>
                <div class="amount font24 inline center">¥100</div>
            </div>
            <div class="input_box font12">
                <div class="input_tel">
                    <label>手机号：<input type="tel" class="inline font12" placeholder="请输入您的手机号码" id="tel_number"/></label>
                </div>
                <div class="validate">
                    <label>获取验证码：<input type="text" class="inline font12"/></label>
                    <div class="go_validate right center font12" id="hack">去获取</div>
                </div>
            </div>
            <div class="center">
                <a href=<?php echo($output['link']) ?> class="just_btn inline font17">去绑定</a>
            </div>
        </div>
    </div>
    <div class="footer"></div>
    <div class="banner">
        <div class="logo left"></div>
        <div class="banner_title inline">
            <p class="font15 center">立刻去下载(熊猫美妆)</p>
            <p class="font12 center">开启你口袋里的化妆包吧</p>
        </div>
        <div class="down right"></div>
    </div>
</div>


<script src="js/rem.js"></script>
<script src="js/zepto.js"></script>
<script src="js/touch.js"></script>
<script type="text/javascript">


    $(function(){
        tel={
            init:function(){
                this.validate();
            },
            validate:function(){
                var that=this;
              $('#hack').on('touchstart',function(e){
                    e.preventDefault();//阻止浏览器默认事件
                    var telVal=$('#tel_number').val(),
                        tel=new RegExp("^[1][3-8]+\\d{9}");
                  console.log(tel.test(telVal));
                  //验证输入手机规则
                    if(telVal==''||(!tel.test(telVal))){
                        that.appendDom();//插入HTML弹窗结构
                    }
                    else{
                        return false;
                    }
              })
            },
            appendDom:function(){
                var dom='<div class="bomb">'+
                        '<div class="bomb_box">'+
                        '<p class="center font14">请认真填写你的手机号</p>'+
                        '<div class="btn">'+
                        '<div class="left center">'+
                        '<a href="javascript:void(0)" class="no inline center font14">不写了</a>'+
                        '</div>'+
                        '<div class="left center">'+
                        '<a href="javascript:void(0)" class="remove inline center font14">这就写</a>'+
                        '</div>'+
                        '</div>'+
                        '<div class="close" id="close"></div>'+
                        '</div>'+
                        '</div>';
                $('#fullPage').append(dom);
            },
            close:function(){

            }

        };
        tel.init();
    })
</script>
</body>
</html>