使用jquery封装一个可以复用的提示框

首先在html中

<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>

在script标签中

 $(".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()
                            }
                        }
                    })
                }

            }
        })

　css样式

.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;
}

原文地址：https://www.cnblogs.com/JiAyInNnNn/p/11130278.html