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

Posted 2022-03-13 jiayinnnnn

首先在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\\d10$")

            //获取页面高度的方法
            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;