美文网首页
移动端弹窗插件的封装和粘贴复制分享功能

移动端弹窗插件的封装和粘贴复制分享功能

作者: 幸宇 | 来源:发表于2018-03-26 15:03 被阅读77次
    ; (function (global, undefined) {
        "use strict" //使用js严格模式检查,使语法更规范
        var _global;
        var pop = {
          create: function (w, d) {
            var divstr=`
                <div class="pop popclose">
                <div class="pop-box botp">
                    <h3 class="pop-title">注册成功</h3>
                    <div class="pop-content">
                        <p class="pop-text1">注册完成就去分享吧~</p>
                        <p class="pop-text2">静候佳音之时,可以和好友分享这一刻~</p>
                        <p class="pop-text3">让更多亲友来体验超值课程</p>
                        <div class="col-xs-12 pop-share">
                            <div class="col-xs-6">
                                <img class="img1" src="images/qq.png">
                            </div>
                            <div class="col-xs-6">
                                <img class="img2" src="images/wx.png" alt="">
                            </div>
                            
                        </div>
                        <div class="col-xs-12 bt">
                            <div class="col-xs-6 qq_out">
                                <button class="qq" data-clipboard-text="小学600元课程0元秒杀活动-北京新东方学校http://test.bj.xdf.cn/bj_static/setykm/">去QQ粘贴</button>
                            </div>
                            <div class="col-xs-6">
                                <button class="wx" data-clipboard-text="小学600元课程0元秒杀活动-北京新东方学校http://test.bj.xdf.cn/bj_static/setykm/">去微信粘贴</button>
                            </div>
                            
                        </div>
                        
                        
                    </div>
                    <span class="pop-zs">
                        <img src="http://bj.xdf.cn/bj_static/wiki/zc/images/popzs.png" alt="">
                    </span>
                    <span class="pop-close">
                        <img src="http://bj.xdf.cn/bj_static/wiki/zc/images/popclose.png" alt="">
                    </span>
                </div>
                
                    <div class="pop-box botm">
                        <h3 class="pop-title">完成</h3>
                        <div class="pop-content">
                            <p class="text">内容已复制好了 </p>
                            <p class="text">快去粘贴吧~</p>
                            <p class="p-cont"></p>
                            <div class="col-xs-12 bt">
                                    <button class="wx" data-clipboard-text="小学600元课程0元秒杀活动-北京新东方学校http://test.bj.xdf.cn/bj_static/setykm/">好的</button>
                            </div>
                                               
                        </div>
                        <span class="pop-zs">
                            <img src="http://bj.xdf.cn/bj_static/wiki/zc/images/popzs.png" alt="">
                        </span>
                        <span class="pop-close">
                            <img src="http://bj.xdf.cn/bj_static/wiki/zc/images/popclose.png" alt="">
                        </span>
                    </div>
               
                </div>
            `
            var cssstr=`
                    .popshow {
                        display: block
                    }
    
                     .popclose {
                        display: none
                    } 
    
                    .pop {
                        z-index: 1000;
                        position: fixed;
                        top: 0;
                        right: 0;
                        bottom: 0;
                        left: 0;
                        overflow: hidden;
                        background: rgba(0, 0, 0, .3)
                    }
    
                    .pop-box {
                        position: absolute;
                        top: 0px;
                        right: 0;
                        bottom: 0;
                        left: 0;
                        width: 85%;
                        min-width: 240px;
                        max-width: 480px;
                        margin: auto;
                        height: 294px;
                        text-align: center;
                        background: #fff;
                        border-radius: 20px;
                    }
    
                    .pop-title {
                        margin: 0;
                        padding: 15px 0;
                        border-top-left-radius: 20px;
                        border-top-right-radius: 20px;
                        font-weight: bold;
                        font-size: 22px;
                        background: #f7e133;
                    }
    
                    .pop-text {
                        margin: 0;
                        padding: 30px 10px;
                    }
    
                    .pop-zs {
                        position: absolute;
                        left: 15px;
                        top: -16px;
                    }
    
                    .pop-close {
                        position: absolute;
                        right: 15px;
                        top: 15px;
                    }
    
                    .pop-zs img {
                        max-width: 65px;
                    }
    
                    .pop-close img {
                        max-width: 30px;
                    }
    
                    .pop-content button {
                        
                        padding: 10px 50px;
                        border-radius: 20px;
                        border: 0;
                    }
    
                    .botm {
                       position:fixed;
                       bottom:0;
                       top:0px;
                       left:0;
                       right:0;
                    }
                    .pop-content{padding-top:17px;}
                    .pop-content p{text-align: left;padding-left: 20px;margin-bottom:0px;margin-top:7px;margin-bottom:5px;word-wrap: break-word; word-break: normal; }
                    .pop-content p.pop-text1{color:#feb518;font-size:18px;}
                    .pop-share img{width:63px}
                    .pop-share{border-bottom: 1px solid #e5e5e5;}
                    .pop-content button{padding: 15px;}
                    .qq_out{border-right:1px solid #e5e5e5;}
                    .qq,.wx{display: inline-block;background: none;padding:0px;font-size:16px;outline:none}
                    .qq{border-right: 1px solid #e5e5e5;}
                    .pop .botm .text{margin:0px;padding:10x 5px;font-size:16px;text-align:center}
                    .botm .pop-box{height:195px;}
                    .botm .bt{border-top:1px solid #e5e5e5;color:#feb518;margin-top:46px;}
                    .botp{z-index:99;}
                    .botm{z-index:10000;height:249px}
                    .botm .pop-content{padding-top:49px;}
                    .botm .p-cont{padding-left:0px;padding-left:10px;padding-right:10px;}
            `
            d.write(divstr);
            function addpopstyle(newStyle) {
              var styleElement = d.getElementById('xdfpopstyles');
              if (!styleElement) {
                styleElement = d.createElement('style');
                styleElement.type = 'text/css';
                styleElement.id = 'xdfpopstyles';
                d.getElementsByTagName('head')[0].appendChild(styleElement);
              }
              styleElement.appendChild(d.createTextNode(newStyle));
            }
            addpopstyle(cssstr);
          }(window, document),
    
          open: function (setting) {
            var defaultsetting = {
                title:"注册成功",
                content:["注册完成就去分享吧~","静候佳音之时,可以和好友分享这一刻~","让更多亲友来体验超值课程"],
                img:["images/qq.png","images/wx.png"],
                button:["去QQ粘贴","去微信粘贴"],
                share:function(){
                    document.querySelector('.pop').classList.remove("popclose");
                    document.querySelector('.botm').classList.add("popclose");
                    var clipboard = new Clipboard('.wx');  
                    var clipstr=document.title+window.location.href;
                    // alert(clipstr)
                    document.querySelector(".pop .pop-close").addEventListener("click", function () {
                        document.querySelector('.pop').classList.add("popclose");
                    });
                   
                    $('.bt button,.pop-share').click(function(){
                        document.querySelector('.botm').classList.remove("popclose");
                        document.querySelector('.botp').classList.add("popclose");
                        
                        // $("[data-clipboard-text]").each(function () {
                        //     console.log($(this).attr("data-clipboard-text"));
                        // });
                     
                    //    $(".wx").each(function () {
                    //         $(this).attr("data-clipboard-text",clipstr);
                    //     });
    
    
                        // clipboard.on('error', function(e) {
                        //     document.querySelector('.p-cont').innerHTML='手机版本不支持,请手动选择“拷贝”进行复制!'+'【'+document.title+window.location.href+'】';
                        //     $('.text').css('display','none');
                        //     $('.botm').css('height','226px')
                        //  });
                         clipboard.on('error', function(e) {
                            document.querySelector('.p-cont').innerHTML='手机版本不支持,请手动选择“拷贝”进行复制!'+'【'+'小学600元课程0元秒杀活动-北京新东方学校http://test.bj.xdf.cn/bj_static/setykm/'+'】';
                            $('.text').css('display','none');
                            $('.botm').css('height','226px')
                         });
    
    
                    })
    
                    document.querySelector(".botm .bt").addEventListener("click",function(){
                        document.querySelector('.pop').classList.add("popclose");
    
                    })
                    document.querySelector(".botm .pop-close").addEventListener("click",function(){
                        document.querySelector('.pop').classList.add("popclose");
                        document.querySelector('.botp').classList.remove("popclose");
                    })
    
                }
            }
            
            $.extend(defaultsetting, setting);
            defaultsetting.share(); 
            
            document.querySelector('.pop-title').innerHTML=defaultsetting.title;
            document.querySelector('.pop-text1').innerHTML=defaultsetting.content[0];
            document.querySelector('.pop-text2').innerHTML=defaultsetting.content[1];
            document.querySelector('.pop-text3').innerHTML=defaultsetting.content[2];
            document.querySelector('.img1').src=defaultsetting.img[0];
            document.querySelector('.img2').src=defaultsetting.img[1];
            document.querySelector('.qq').innerHTML=defaultsetting.button[0];
            document.querySelector('.wx').innerHTML=defaultsetting.button[1];
            
            
          },
    
          close: function () {
            document.querySelector('.pop').classList.add("popclose");
          }
        }
        // 最后将插件对象暴露给全局对象
        _global = (function () { return this || (0, eval)('this'); }());
        !('pop' in _global) && (_global.pop = pop);
      }());
    

    调取

    
        <script src="http://bj.xdf.cn/bj_static/wiki/zc/js/xdfpop.js"></script>
        <script src="js/clipboard.min.js"></script>
        <script src="js/pop1.js"></script>
    
        <script type="text/javascript">
            var formId = "52822e6d-4e88-4192-8e12-f078c487294b";
    
            function submit_data() {
    
                if ($('#name').val() == "") {
                    $('#name').focus();
                    // alert("姓名不能为空");
                    xdfpop.open({
                       title: "温馨提示",
                       content: "姓名不能为空哦~",
                       button: "知道了"
                     });
                    return false;
                }
    
                // if ($('#name').val() == "") {
                //  $('#name').focus();
                //  // alert("姓名不能为空");
                //  pop.open({
                //      title:"注册成功",
                //      content:["您已注册成功,稍后我们会联系您","静候佳音之时,您可以将此优惠分享给他人,","让更多亲友来体验超值课程"],
                //      img:["images/qq.png","images/wx.png"],
                //      button:["去QQ粘贴","去微信粘贴"],
                //  });
                //  return false;
                    
                //  }
    
                if ($('#tel').val() == "") {
                    $('#tel').focus();
                    // alert("手机不能为空");
                    xdfpop.open({
                       title: "温馨提示",
                       content: "手机号码不能为空哦~",
                       button: "知道了"
                     });
                    return false;
                }
    
    
    
                if ($('#verificationCode').val() == "") {
                    $('#verificationCode').focus();
                    // alert("请输入验证码");
                    xdfpop.open({
                       title: "温馨提示",
                       content: "请输入验证码吧~",
                       button: "知道了"
                     });
                    return false;
                }
    
    
    
                var inputName = new Array();
                inputName[0] = "name";
                inputName[1] = "tel";
                inputName[2] = "grade";
                var verificationCode = $("#verificationCode").val();
                var telephone = $('#tel').val();
                window.checkResultCallback = function (jsonObject) {
                    console.log('>>>>>', jsonObject.result,jsonObject.status);
                    if (jsonObject != null) {
                        //json.result验证是否成功,ok为短信验证成功,error为验证失败
                        if (jsonObject.result == "ok") {
                            //短信验证提示
                            if (jsonObject.status == "1") { //数据是否保存成功
                                //数据保存成功,提示或其他动作            
                                // alert("注册成功!我们会尽快与您取得联系!");
    
                                // xdfpop.open({
                                //    title: "完成",
                                //    content: "注册成功!我们会尽快与您取得联系~",
                                //    button: "知道了"
                                //  });
    
                                pop.open({
                                    title:"注册成功",
                                    content:["您已注册成功,稍后我们会联系您","静候佳音之时,您可以将此优惠分享给他人,","让更多亲友来体验超值课程"],
                                    img:["images/qq.png","images/wx.png"],
                                    button:["去QQ粘贴","去微信粘贴"],
                                });
    
    
                            } else if (jsonObject.status == "501") {
                                // alert("此手机号已注册");
                                xdfpop.open({
                                   title: "温馨提示",
                                   content: "这个手机号码已经被注册过了~",
                                   button: "知道了"
                                 });
                                //刷新页面或其他行为
                                $('#tel').val('');
                                $('#verificationCode').val('');
                                
                            } else if (jsonObject.status == "-1") {
                                // alert("配置文件不存在!");
                                xdfpop.open({
                                   title: "温馨提示",
                                   content: "配置文件不存在~",
                                   button: "知道了"
                                 });
                            } else {
                                // alert("系统错误,请刷新页面!");
                                xdfpop.open({
                                   title: "温馨提示",
                                   content: "系统错误,请刷新页面吧~",
                                   button: "知道了"
                                 });
                                //直接都刷新
                                window.location.reload;
                            }
                        } else if (jsonObject.result == "error") {
                            if (jsonObject.code == 403) {
                                // alert("验证码错误!");
                                xdfpop.open({
                                   title: "温馨提示",
                                   content: "验证码错误~",
                                   button: "知道了"
                                 });
                                //清空验证码输入框,或其他操作
                                $('#verificationCode').val('');
                            } else if (jsonObject.code == 402) {
                                // alert("验证码已过期,请重新获取验证码!");
                                xdfpop.open({
                                   title: "温馨提示",
                                   content: "验证码已过期,请重新获取验证码~",
                                   button: "知道了"
                                 });
                                //此处重置获取验证码按钮,或者刷新页面
                                window.location.reload;
                            } else if (jsonObject.code == 401) {
                                // alert("验证码错误次数过多,请重新获取验证码!");
                                xdfpop.open({
                                   title: "温馨提示",
                                   content: "验证码错误次数过多,请重新获取验证码~",
                                   button: "知道了"
                                 });
                                //此处重置获取验证码按钮
                                $('#verificationCode').val('');
                            } else if (jsonObject.code == 405) {
                                // alert("数据已保存成功!");
                                xdfpop.open({
                                   title: "温馨提示",
                                   content: "您已提交成功,请耐心等待~",
                                   button: "知道了"
                                 });
                                //此处重置获取验证码按钮
                                $('#verificationCode').val('');
                            } else {
                                // alert("系统错误,请刷新页面!");
                                xdfpop.open({
                                   title: "温馨提示",
                                   content: "系统错误,请刷新页面~",
                                   button: "知道了"
                                 });
                                //刷新页面
                                window.location.reload;
                            }
                        }
                    }
                }
                vaildNoteCode_submitData(inputName, formId, "少儿体验课", telephone, verificationCode);
                // vaildNoteCode_submitData(inputName, "99029651-45f1-4a89-9f2e-56296cee2eb3", "市场部线下大活动", telephone, verificationCode);
            }
    
    
    
            var sends = {
                checked: 1,
                send: function () {
                    var numbers = /^1\d{10}$/;
                    var val = $('#tel').val().replace(/\s+/g, ""); //获取输入手机号码
                    if ($('.div-phone').find('span').length == 0 && $('.identity button').attr('class') == 'send1') {
                        if (!numbers.test(val) || val.length == 0) {
                            $('.div-phone').append('<span class="error">请输入正确手机号!</span>');
                            return false;
                        }
                    }
                    if (numbers.test(val)) {
                        // $(".send1").prop("disabled", true);
                        var onclickStr = $("#sendBtn").attr('onclick');
                        $('#sendBtn').attr('onclick', 'return false;' + onclickStr);
                        var time = 60;
                        $('.div-phone span').remove();
                        function timeCountDown() {
                            if (time == 0) {
                                // $(".send1").prop("disabled", false);
                                var onclickStr = $("#sendBtn").attr('onclick');
                                $('#sendBtn').attr('onclick', onclickStr.split(';')[1]);
                                clearInterval(timer);
                                $('.identity button').addClass('send1').removeClass('send0').html("获取验证码");
                                sends.checked = 1;
                                return true;
                            }
                            $('.identity button').html(time + "S后重发");
                            time--;
                            return false;
                        }
                        $('.identity button').addClass('send0').removeClass('send1');
                        timeCountDown();
                        var timer = setInterval(timeCountDown, 1000);
                        window.checkTelephoneExist = function (jsonObject) {
                            console.log('>>>>>', jsonObject.status);
                            if (jsonObject != null) {
                                var status = jsonObject.status;
                                if (status == -1 || status == 501) {
                                    // alert("电话号码本页面已注册!");
                                    xdfpop.open({
                                       title: "温馨提示",
                                       content: "电话号码本页面已注册~",
                                       button: "知道了"
                                     });
                                } else if (status == 1) {
                                    //电话号码不存在,并下发短信成功
                                    globalMsgId = jsonObject.msgId;
                                } else {
                                    console.log("页面异常!" + status);
                                    //刷新页面
                                    window.location.reload;
                                }
                            }
                        }
                        getNoteCode(val, formId);
                    }
                }
            }
        </script>
    
    
        <script>
            $(document).ready(function () {
                $.ajax({
                    type: 'get',
                    async: false,
                    url: 'http://bjmx.xdf.cn/clue/form/getCountByFormId',
                    //url : 'http://clue.bj.staff.xdf.cn/clue/form/getCountByFormId',
                    dataType: 'jsonp',
                    data: {
                        formId: '52822e6d-4e88-4192-8e12-f078c487294b'
                    },
                    jsonp: 'callbackparam',
                    jsonpCallback: 'success_jsonpCallback',
                    success: function (json) {
                        // var randnum = 0;
                        // randnum = json.count;
                        // var newrandnum=randnum-100;
                    var len = json.count;
                    var len = len.toString();
                    var sub=len.substring(len.length,len.length-2);
                    var randnum = parseInt(sub) ;
    
                        // console.log(newrandnum)
                        if (randnum >= 100) {
                            // randnum = newrandnum;
                            // newrandnum=100;
                            var rn = ('' + randnum);
                            $(".getnum .nownum").text(rn);
                            // $("#register .res").css("display","none");
                            // var path="images/registerover.png";
                            // var demo=$("#register img").attr("src",path);
                        } else {
                            var rn = ('' + randnum);
                            $(".getnum .nownum").text(rn);
                        }
                    },
                    complete: function (XMLHttpRequest, textStatus) {
                        // alert(XMLResponse.responseText+XMLHttpRequest.status);
                    },
                    error: function (json, XMLResponse) {
                        //alert(XMLResponse.responseText+XMLHttpRequest.status);
                        result = "返回信息:" + json.message + "错误码:" + XMLHttpRequest.status;
                    }
                });
    
    
    
                $(".mod-1 .register .select select").change(function(){
                    $(this).css("color","#555");
                });
            });
        
            function activehover(btn, content) {
                $(btn).mouseenter(function () {
                    $(this).addClass("active").siblings().removeClass("active");
                    $(content).hide().eq($(this).index()).show();
                })
            }
            activehover(".classbord .classtabs li", ".classbord .classcontents li");
        </script>
    

    相关文章

      网友评论

          本文标题:移动端弹窗插件的封装和粘贴复制分享功能

          本文链接:https://www.haomeiwen.com/subject/pujrcftx.html