<div class="backcap">

    <div class="diolag">

        <div class="diolag-div">

            <img class="diolag-icon" src="{{ basePath }}/img/solution/app/close.png">

            <div class="img">

                <img />

            </div>

            <h3 class="diolag-title"></h3>

            <p class="diolag-content"></p>

            <button type="button" class="diolag-close">确定</button>

        </div>

    </div>

  </div>

 $(".backcap").hide()

        //弹框时，每次整个页面变暗一点

       //设置.backcap类名的元素显示，css样式见下文

        var changeBack = function (){

            $(".backcap").show()

        }

      //设置.backcap类名的元素不显示，css样式见下文

        var changeCome = function (){

            $(".backcap").hide()

        }

     //设置.diolag 我弹出框消失

        $(".diolag").hide()

    //设置.diolag 中的右侧X点击后，弹出框消失

        $(".diolag .diolag-icon").click(function () {

            $(".diolag").hide()

            changeCome()

        })

 //设置.diolag 中的下面的按钮点击后，弹出框消失

        $(".diolag .diolag-close").click(function () {

            $(".diolag").hide()

            changeCome()

        })

 //当我点击.submit的时候，先验证正则

 $(".submit").click(function (){

            // 获取正则手机号的数据

            let contentData = $("#content").val()

            let mobileData = $("#mobile").val()

            let patt1=new RegExp("^1\\d{10}$")

            //获取页面高度的方法

            var getHeight = function (){

                let _width = document.documentElement.clientWidth; //屏幕宽

                let _height = document.documentElement.clientHeight; //屏幕高

                let boxWidth = 580;//正常不应该写死的，由于需要我这里写死了

                let boxHeight = 330;//正常不应该写死的，由于需要我这里写死了

                // console.log(boxWidth,_width,_height)

                $(".diolag").show();

                $(".diolag .diolag-div").css({

                    "left": (_width - boxWidth) / 2 + `px`,

                    "top": (_height - boxHeight) / 2 + `px`

                })

            }

            //信息有误的时候

            var getFail = function (){

                changeBack()

                console.log('tel is wrong')

                //这是电话有误

                $('.diolag .diolag-title').text("提交失败！").css({"font-size": "18px", "color": "#3b426b","font-weight":"400"})

                $('.diolag .img img').attr("src", "{{ basePath }}/img/solution/app/fail.png");

                $('.diolag .diolag-content').text("老板, 您的手机号码填写有误，请确认填写正确后再提交一次吧！").css({

                    "font-size": "14px",

                    "color": "#7d88a2",

                    "line-height": "28px",

                    "margin-top": "160px"

                })

            }

            // 提交成功时

            var getSucess = function (){

                changeBack()

                console.log('success')

                $('.diolag .diolag-title').text("提交成功！").css({"font-size": "18px", "color": "#3b426b","font-weight":"400"})

                $('.diolag .img img').attr("src", "{{ basePath }}/img/solution/app/success.png");

                $('.diolag .diolag-content').text("老板, 您的信息已提交成功, 保持预留手机的通畅,  我们将尽快与您取得联系哦！").css({

                    "font-size": "14px",

                    "color": "#7d88a2",

                    "line-height": "28px",

                    "margin-top": "160px"

                })

            }

            // 重复提交时

            var getAgain = function (){

                changeBack()

                console.log('getagain')

                $('.diolag .diolag-title').text("重复提交！").css({"font-size": "18px", "color": "#3b426b","font-weight":"400"})

                $('.diolag .img img').attr("src", "{{ basePath }}/img/solution/app/fail.png");

                $('.diolag .diolag-content').text("老板, 您的信息已提交过啦, 请勿重复提交哦！").css({

                    "font-size": "14px",

                    "color": "#7d88a2",

                    "line-height": "28px",

                    "margin-top": "160px"

                })

            }

            // 没有填写内容

            var getNocont = function (){

                changeBack()

                console.log('getNocont')

                $('.diolag .diolag-title').text("提交失败！").css({"font-size": "18px", "color": "#3b426b","font-weight":"400"})

                $('.diolag .img img').attr("src", "{{ basePath }}/img/solution/app/fail.png");

                $('.diolag .diolag-content').text("老板，您的需求信息还没有填写，请填写完整再提交哦！").css({

                    "font-size": "14px",

                    "color": "#7d88a2",

                    "line-height": "28px",

                    "margin-top": "160px"

                })

            }

            let lock = true

            getHeight()

            if(!patt1.test(mobileData)){

                //执行电话有误的事件

                getFail()

            }else {

                let subData = {

                    content: contentData,

                    mobile: mobileData,

                    type: 100

                }

                //这是成功的

                if(lock){

                    lock = false

                    //发送请求

                    $.ajax({

                        type:"POST",

                        url:"请求地址",

                        data:subData,

                        success:function(msg){

                            if(msg.error == "0"){

                                getSucess()

                            }else if(msg.error=="-1"){

                                getNocont()

                            }

                        }

                    })

                }

            }

        })

.solution-app .backcap{

    background: rgba(0,0,0,0.5);

    position:fixed;

    width:100%;

    height:1200px;

    z-index:160;

    top:0px;

}

.solution-app .diolag{

    height:330px;

    position: relative;

    text-align: center;

    float:left;

}

.solution-app .diolag-div{

    position: fixed;

    z-index:200;

    width:580px;

    height:330px;

    padding:16px 134px;

    box-sizing: border-box;

    border-radius: 10px;

    background: white;

}

.solution-app .img {

    position: absolute;

    text-align: center;

    margin:18px auto;

    margin-bottom: 16px;

    left:245px;

}

.solution-app .diolag .diolag-icon{

    position:absolute;

    right:18px;

    width:30px;

    height:30px;

    top:18px;

    color:#d0d0d0;

}

.solution-app .diolag .diolag-close{

    height:40px;

    width:100px;

    color:#fff;

    font-size:14px;

    margin-top: 24px;

    background: #599bff;

    border-radius: 4px;

    cursor: pointer;

}

.solution-app .diolag-title{

    position: absolute;

    margin:0 auto;

    left:250px;

    top:140px;

}