预约弹窗demo

<!-- 预约弹窗 -->
    <div class="xfShadow">
        <div class="xfOrder">
            <span class="closeMe"></span>
            <h3>下载资料入口</h3>
            <h6>《填写成功后即可下载资料》</h6>

            <form name="form1" id="demo" method="post" action="http://www.huatu.com/other/yuyue/yuyue_main.php"
                target="_top" onsubmit="return Validator.Validate(this,2)">
                <input type=‘hidden‘ class=‘text‘ name=‘examtype‘ id=‘examtype‘ value=‘6‘>
                <input type=‘hidden‘ class=‘text‘ name=‘schoolid‘ id=‘schoolid‘ value=‘52‘>
                <input type=‘hidden‘ class=‘text‘ name=‘appinfoid‘ id=‘appinfoid‘ value=‘11697‘>
                <input type="hidden" name="Ext1" id="source" value="直链">
                <input type="hidden" class="text" name="encode" value="utf-8">

                <div class="clearfix list-div">
                    <select name="Ext1">
                        <option value=‘福州‘ selected=‘selected‘>福州</option>
                        <option value=‘厦门‘>厦门</option>
                        <option value=‘漳州‘>漳州</option>
                        <option value=‘泉州‘>泉州</option>
                        <option value=‘龙岩‘>龙岩</option>
                        <option value=‘三明‘>三明</option>
                        <option value=‘宁德‘>宁德</option>
                        <option value=‘莆田‘>莆田</option>
                        <option value=‘南平‘>南平</option>
                    </select>
                    <p class="tip"></p>
                </div>

                <div class="clearfix list-div">
                    <input type="text" require="false" dataType="Mobile" class="text" name="mobile" id="shoujihao"
                        msg="手机号码不正确" placeholder="请输入您的手机号">
                    <p class="tip"></p>
                </div>
                <div class="clearfix list-div">
                    <input type="text" dataType="Require" id="PhoneCode" name="PhoneCode" size="8" placeholder="请输入验证码">
                    <input type="button" class="fs" id="fs" onClick="sendnum(this)" value="获取验证码">
                    <p class="tip"></p>
                </div>

                <input type="button" statistics="statistics" class="yuyueBtn" value="点击领取" name="" id=""
                    onClick="jiancha(this)">
            </form>
            <p class="des">更多问题详询--><a href="http://fj.huatu.com/zt/dizhi/index1.html">在线客服</a><br>网站优化建议联系：QQ3476810136
            </p>
        </div><!-- 预约弹窗 end -->

/* 预约弹窗 */
.xfShadow {
    display:block; position:fixed; left:0; top:0; width: 100%; height: 100%; z-index:20;
    background: rgba(0,0,0,.55);
    transform: scale(1);
    transition: all .5s;
    display: none;
}
.xfOrder {
    display:block; position:fixed; left:50%; top:50%; z-index: 22; box-sizing: border-box;
    width:570px; height:580px; padding:50px 45px 0; margin-left: -290px; margin-top:-270px;
    background: #fff; border-radius: 20px;
}
.closeMe {
    position:absolute; right:-36px; top:-26px; cursor: pointer;
    display:block; width:26px; height:26px;
    border:1px solid #fff; border-radius: 100%;
    color:#fff; font-size: 20px; line-height: 26px; vertical-align: middle; text-align: center;
    transition: all .3s;
}
.closeMe:before,
.closeMe:after {
    content: " "; display: block; width:16px; height:2px;
    position:absolute; left:5px; top:12px; 
    background: #fff;
    transform: rotate(45deg);
}
.closeMe:after {
    transform: rotate(-45deg);
}
.closeMe:hover { transform: rotate(180deg); }
.xfOrder h3 { font-size:26px; font-weight: 400; line-height:30px; text-align: center; }
.xfOrder h6 { margin:10px auto 30px; font-size:14px; font-weight: 400; line-height:30px; text-align: center; }
.list-div { position: relative; }
.list-div input,
.list-div select {
    display: block; width:100%; height:50px; box-sizing: border-box;
    background: #fff; border:1px solid #a1a1a1; border-radius:5px;
    outline: none;
    font-size:20px; text-indent: .75em; vertical-align: middle;
    transition: all .2s;
}
.list-div input { font-family:"Hiragino Sans GB", "MicroSoft YaHei", Arial, sans-serif ; }
.list-div input[type="text"] { box-shadow: 0 0 0 500px #fff inset;}
.list-div select {
 float:left;
 width:478px;
 padding-left:0;
 line-height:50px;
}

.list-div input:hover,
.list-div select:hover { border-color:#777; }
.list-div input:focus,
.list-div select:focus { border-color:#ffa462; }
.list-div input.error,
.list-div select.error { border-color:#f11d36; color:#f11d36; transition: all .2s; }
.list-div #city { float: right; }
.list-div #PhoneCode { width:294px; }
.list-div .fs {
    position:absolute; right:0; top:0;
    width:170px; cursor: pointer;
    background: #f11d36; border:none;
    color:#fff; text-align: center; text-indent: 0;
    transition:all .2s;
}
.list-div .fs:hover { background: #e00a13; }
.list-div .tip { clear:both; height:34px; color: #f11d36; font-size:14px; line-height:34px; text-indent: 15px; }
.yuyueBtn {
    display: block; width:100%; height:58px; margin:10px auto 20px; cursor: pointer;
    background: #f11d36; border-radius:5px; border:none;
    color:#fff; font-size:24px; line-height:58px; text-align: center;
    transition:all .2s;
}
.yuyueBtn:hover { background: #e00a13; }
.xfOrder .des { font-size: 14px; line-height: 28px; text-align: center; }
/* 预约弹窗 end */
@media only all and (max-width:1200px) {
/* 预约弹窗 */
    .xfOrder { width:16rem; height:20rem; padding:1.5rem 1rem 0; margin-left: -8rem; margin-top:-9rem; border-radius:.5rem; }
    .closeMe { right:0; top:-1.75rem; width:1.3rem; height:1.3rem; border-width: .05rem; }
    .closeMe:before,
    .closeMe:after { width:.9rem; height:.1rem; left:.2rem; top:.6rem; }
    .xfOrder h3 { font-size:1rem; line-height:1.4rem; }
    .xfOrder h6 { margin:0 auto .75rem; font-size:.65rem; line-height:1.6rem; }
    .list-div select {
 width:13.95rem;
 line-height: 1.8rem;
}

    .list-div input,
    .list-div select { width:14rem; height:1.8rem; border-radius:.25rem; font-size:.7rem; }

    .list-div #PhoneCode { width:8.5rem; }
    .list-div .fs { width:5rem; }
    .list-div .tip { height:1.2rem; font-size:.6rem; line-height:1.2rem; text-indent:.525rem; }
    .yuyueBtn {
        height:2rem; margin:.25rem auto .75rem;
        border-radius:.25rem;
        font-size:.75rem; line-height:2rem;
    }
    .xfOrder .des { font-size:.6rem; line-height:1rem; }
    /* 预约弹窗 end */

}

new WOW().init();
//计算根字号
function autoScreen() {
    var x = $(‘html‘).width();
    if ($(window).width() < 1200) {
        $("html").css("font-size", 40 * (x / 750) + "px");
    } else {
        $("html").css("font-size", 40 + "px");
    }
}
autoScreen();

$(window).resize(function() {
    autoScreen();
});

    $("table span").click(function(){
        var url = $(this).attr("data-href");
        window.open(url)
    })

$(document).ready(function () {
    // console.log($(‘body‘).height())
    // console.log($(window).height())
    if($(‘body‘).height() < $(window).height()){
        // console.log("窗口高度大于文档高度");
        $(‘.footer‘).css({"position":"fixed","bottom":"0","left":"0","width":"100%","right":"0"})
    }else{
        // console.log("窗口高度小于文档高度");
        $(‘.footer‘).css({"position":"relative","bottom":"auto","left":"auto","width":"100%","right":"auto"})
    }
});
$(function() {
    autoScreen();
});

// 预约弹窗 开始


// 预约
function Validate(frm) {}

function ChangeCode() {
    document.getElementById("imgcode").src = "http://www.huatu.com/other/yuyue/include/imgcode.php?id=" + Math.random();
}

var mobile;

function sendnum(obj) {
    var objForm = $(obj).parents(‘form‘).get(0);
    var shouji = $(objForm).find(‘input[name="mobile"]‘).val();
    var objFormName = $(objForm).attr(‘name‘);
    console.log($(obj))
    console.log(shouji)
    console.log(objFormName)

    // var shouji = $(‘#shoujihao‘).val();


    if (!shouji) {
        alert(‘请输入手机号‘);
        return false;
    }


    if (!(/^(1[0-9]{10})$/.test(shouji))) {
        alert(‘请输入有效的手机号码！‘);
        return false;
    }
      $(objForm).find(‘.fs‘).attr(‘disabled‘, true);
    var SysSecond;
    var InterValObj;
    SysSecond = 60;
    InterValObj = window.setInterval(SetRemainTime, 1000);

    function SetRemainTime() {
        if (SysSecond > 0) {
            SysSecond = SysSecond - 1;
            var second = Math.floor(SysSecond % 60);
            var minite = Math.floor((SysSecond / 60) % 60);
            var hour = Math.floor((SysSecond / 3600) % 24);
            var day = Math.floor((SysSecond / 3600) / 24);
            $(objForm).find(‘.fs‘).val(second + ‘秒‘);
        } else {
            window.clearInterval(InterValObj);
            $(objForm).find(‘.fs‘).val(‘发送短信‘);
            $(objForm).find(‘.fs‘).attr(‘disabled‘, false);
        }
    }
    $.getJSON(‘http://www.huatu.com/other/yuyue/duanxin/xiebodx.php?callback=?‘, {
        ‘tel‘: shouji,
        ‘appinfoid‘: $(objForm).find(‘input[name=appinfoid]‘).val()
    }, function (data) {
    if (data.click == ‘0‘) {
            if (data.address == 0 || data.address == ‘‘) {
                var tempnum = parseInt(Math.random()*10000);
                alert(‘您已参加活动！验证码‘+tempnum);
                $(objForm).find(‘.PhoneCode‘).val(tempnum);
                $(‘.window_wrap‘).hide()
                
                var exp = new Date();
                exp.setTime(exp.getTime() + 60 * 5000);
                document.cookie = ‘cooknum=‘ + tempnum + ‘;expires=‘ + exp.toGMTString();
                document.cookie = ‘cookmobile=‘ + shouji + ‘;expires=‘ + exp.toGMTString();
                return false;
            }
            // else {
            //     alert(‘您的手机号已参加活动！点击跳转至活动页...‘);
            //     window.location.href = data.address;
            // }
        } else {
            var num = data.click;
            var exp = new Date();
            exp.setTime(exp.getTime() + 60 * 5000);
           document.cookie = ‘cooknum=‘ + num + ‘;expires=‘ + exp.toGMTString();
            mobile = data.mobile;
            document.cookie = ‘cookmobile=‘ + mobile + ‘;expires=‘ + exp.toGMTString();
            $(‘#yzm‘).val(num);
            alert(‘发送成功‘);

        }
    });



}
function jiancha(obj) {
  // 来源
    var url = window.location.search.substr(1);
    $(‘input[name=Ext5]‘).val(url);
    // console.log($(‘input[name=Ext5]‘).val());

    var objForm = $(obj).parents(‘form‘).get(0);
    var objFormName = $(objForm).attr(‘name‘);

    var goToUrl = $(obj).attr("data-data");
    // console.log(goToUrl)

    // console.log($(obj))
    // console.log(objForm)
    // console.log(objFormName)
    // console.log($(objForm).attr(‘action‘))

    var url = getQueryString(‘bd_vid‘);
    var classNow = $(obj).attr(‘statistics‘);
    if (url != null) {
        $.getJSON(‘http://30fen.huatu.com/api/bd_vid.php‘, {
            ‘act‘: ‘chk‘,
            ‘statistics‘: classNow,
        }, function(data) {
            // console.log(data);
        })
    }
  var getNum = $(objForm).find(‘input[name="PhoneCode"]‘).val();


    var cook = getCookie(‘cooknum‘);
    var cookmobile = getCookie(‘cookmobile‘);

    var shouji = $(objForm).find(‘input[name="mobile"]‘).val();
//  console.log(shouji)
    if (cookmobile != shouji) {
        alert(‘手机号和验证码不一致‘);
        return false;
    } else {
        if (getNum == cook) {

            if(!Validator.Validate(objForm,2)){
                return false;
            }
            var formdata = $(objForm).serializeArray()
            // console.log(formdata)
            $.ajax({
                type: ‘post‘,
                url : $(objForm).attr(‘action‘),
                data:formdata,
                dataType:‘text‘,
                success : function (res) {
                    // console.log($(objForm).attr(‘action‘))
                    // console.log(res)
                    // console.log(goToUrl)
                    if(/存在相同记录/.test(res)){
                        alert(‘预约成功‘);
                        // window.location.href = goToUrl;
                        $(‘.window_wrap‘).hide()
                        return false;
                    }else if(/预约成功/.test(res)){
                        alert(‘恭喜您预约成功‘);
                        // window.location.href = goToUrl;
                        $(‘.window_wrap‘).hide()
                    }
                }
            })
        } else {
            alert(‘短信验证码错误‘);
            return false;
        }
    }

}

function getCookie(name) {
    var arr, reg = new RegExp(‘(^| )‘ + name + ‘=([^;]*)(;|$)‘);
    if (arr = document.cookie.match(reg))
        return unescape(arr[2]);
    else
        return null;
}

function getQueryString(name) {
    var reg = new RegExp(‘(^|&)‘ + name + ‘=([^&]*)(&|$)‘, ‘i‘);
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
        return unescape(r[2]);
    }
    return null;
}
// 弹窗限制
$(‘.index_list a‘).click(function () {
    // console.log(‘点击到了‘);
    var cookmobile = getCookie(‘cookmobile‘);
    if (!cookmobile) {
        // console.log(‘还未注册‘);
        $(‘.xfShadow‘).show();
        return false;
    }
});
$(‘.closeMe‘).click(function () {
    // console.log("点击到了");
    $(‘.xfShadow‘).hide()
})
// 预约弹窗end