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

; (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>
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,012评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,628评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,653评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,485评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,574评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,590评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,596评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,340评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,794评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,102评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,276评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,940评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,583评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,201评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,441评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,173评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,136评论 2 352

推荐阅读更多精彩内容

  • KIN97 韵律的红地球 与地球共成长, 生命是一场循环中, 不断进化的过程, 今天,我借助白风沟通的精神力, 在...
    桥墩阅读 393评论 0 1
  • 麦乐老师10.9听课笔记: 9月以后不是教导,而是锚定四次元的状态; 四次元大城市,而来到大城市第一课,也许暂时有...
    axjl如意阅读 357评论 0 0
  • 1.什么是gulp 简单来说就是一个包管理工具。 2.gulp基础内容讲解 2.1 gulp.src(globs[...
    believedream阅读 485评论 0 1
  • 这月轮到我倒班, 倒班也不怎么轻松, 熬的慌, 还好设备稳定, 希望我这一个月安安稳稳的, 让我这月夜班消消停停的,
    嚯我勒个去阅读 171评论 0 1
  • 我把时间的磁带倒回那个傍晚 又把海浪的声音录进那个贝壳 小小的橙色的它是有大海旋律 轻轻地触及着我甜甜的思绪 送给...
    浓浓冬浅浅夏阅读 206评论 0 0