<blockquote class="info"> 轮播代码增强辅助功能说明(用户可以自行下载到本地进行修改引用或者联系客服修改)</blockquote> 1、微信号自带点击复制成功、复制失败弹窗提示 2、自带去微信按钮跳转 3、自定义弹窗主题颜色风格 4、任意点击弹窗,绑定class为diy\_pop\_wxbox,即可实现任意位置点击弹窗 5、支持本地引入修改任意弹窗搭配等 **本教程目的在于学习交流** ~~~ //常用jscdn库 下面代码仅供交流学习使用 一般不必添加到页面 直接加风格代码即可 <script src="https://code.ljwit.com/common_js/jquery.min.js"></script> <script src="https://code.ljwit.com/common_js/layer_mobile.js"></script> <script src="https://code.ljwit.com/common_js/clipboard.js"></script> ~~~ **风格1(适合一般微信号使用)** ![](https://img.kancloud.cn/d4/ec/d4ec7a642aa7ee73d642a9b7b24c546a_1618x1364.png) ~~~ //风格1代码 <script type="text/javascript"> var color = color || []; color.push("#4474BB"); //颜色代码可以自己修改 (function () { var ma = document.createElement("script"); ma.type = "text/javascript"; ma.async = true; ma.src = "https://tj.ljwit.com/code_ex/code_ex.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ma, s); })(); </script> ~~~ **风格2(适合微信号是手机号的使用)** ![](https://img.kancloud.cn/70/f9/70f9a20226258fc1d097a98a9d98f08a_1334x1228.png) ~~~ //风格2代码 <script src="https://tj.ljwit.com/code_ex/code_ex2.js"></script> ~~~ 风格3(适合一般微信号使用,简约风格) ![](https://img.kancloud.cn/9e/0f/9e0f9208b5f683416a42b45339a602be_1186x836.png) ~~~ //风格3代码 <script src="https://tj.ljwit.com/code_ex/code_ex3.js"></script> ~~~ **风格4(漂浮风格)** ![](https://img.kancloud.cn/57/ab/57abdf9664969fddf5395285c1b10e3b_1364x1804.png) ~~~ //风格4代码 <script type="text/javascript"> var color = color || []; color.push("#4474BB"); //颜色代码可以自己修改 (function () { var ma = document.createElement("script"); ma.type = "text/javascript"; ma.async = true; ma.src = "https://tj.ljwit.com/code_ex/code_ex4.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ma, s); })(); </script> ~~~ **风格5(适合微信号是手机号的使用)** ![](https://img.kancloud.cn/f7/d8/f7d82337ec791318fb77beaf8471c4db_1656x1028.png) ~~~ //风格5代码 <script type="text/javascript"> var color = color || [];\ color.push("#4474BB"); //颜色代码可以自己修改 (function () { var ma = document.createElement("script"); ma.type = "text/javascript"; ma.async = true; ma.src = "https://tj.ljwit.com/code_ex/code_ex5.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ma, s); })(); </script> ~~~ **风格6(适合有二维码的pc移动自适应站使用)** ![](https://img.kancloud.cn/b9/a6/b9a6acf3e6fd69b3318717e3999b03b4_1334x1554.png) ~~~ //风格6代码 <script type="text/javascript"> var color = color || []; color.push("#4474BB"); //颜色代码可以自己修改 (function () { var ma = document.createElement("script"); ma.type = "text/javascript"; ma.async = true; ma.src = "https://tj.ljwit.com/code_ex/code_ex6.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ma, s); })(); </script> ~~~ **风格7(适合移动端底部)** ![](https://img.kancloud.cn/eb/81/eb81d2af2fe0b545cfba0aa743bb7ac7_884x278.png) 可以和其他点击弹窗配合使用 ~~~ <!---底部固定漂浮-beg 放到页面底部即可---> <div style="justify-content: space-between;display: flex;z-index: 99999;bottom: 0;width: 100%;height: 50px;margin: 0 auto;background-color: #fcfcfc;border-top: 1px #eee solid;border-top: 1px #eee solid;position: fixed;bottom: 0;"> <div><img style="width: 50px;" src="https://tj.hzypro.com/code_ex/images/qb_icon.png"/></div> <div> <p> 添加微信:<span style="color:red" class="wx_str"></span></p> </div> <div style="margin-right: 50px;font-size: 12px;width: 60px; height: 40px;line-height: 40px; text-align: center;background-color: #008000;color: #fff;border-radius: 0.3rem;margin-top: 0.4rem;"> <strong class="diy_pop_wxbox" >复制微信</strong> </div> </div> <!---底部固定漂浮-end 放到页面底部即可---> ~~~ **风格8(适合移动pc适配使用)** ![](https://img.kancloud.cn/80/7b/807bda94c1b131a9a1b79739a4aeac10_716x1014.png) ![](https://img.kancloud.cn/5d/2e/5d2e42a6a3381d378d053eb5f63a69ea_612x294.png) ``` <!--样式--> <style> /*PC端统一提示代码**/ .wind_tctsk{position: fixed;z-index: 998910151;width: 100%; height: 100%;background-color: rgba(0,0,0,0.6);left: 0; top: 0; display:none;} .wind_tctsk_con{ width: 350px; height: 460px;position:relative; margin: 12% auto 0px auto; background: #fff;border-radius: 20px;} .wind_tctsk_con_foot{width:100%;height:44px;position: absolute;bottom:0px; background:#efefef;color:#686868;border-top:1px solid #e1e1e1;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;left:0;font-size:16px;}.wind_tctsk_con_foot p{float:left;width:50%;height:44px;text-align:center;line-height:42px; cursor: pointer;padding:0;margin: 0;} .wind_img_tips{width: 72px; height: 72px; margin-top: -35px; margin-left: 140px;} .wind_tctsk_con2{width: 230px; margin-left:60px;overflow: hidden; }.showewm{margin-top:5px;height: 265px;overflow: hidden;position:relative;width: 100%;}.okedtxt{text-align: center;font-size: 18px;}.hasrzed{font-size:12px;text-align:left;border:1px solid #fd7d14;color:#fd7d14;background:#feecb6;border-radius: 6px;float: left;padding: 0px 5px;line-height: 17px;}.mfusertx{margin-top:10px;height: 60px;width: 200px;margin-left: 15px;}.showwxh{font-size:14px;text-align:left;margin-bottom:5px;}.erwmsty{width:100%;border:0px;bottom:-2px;left:-2px;position: absolute;}.okoksure{background:#71c341;color:#fff;border-bottom-right-radius: 20px;}.userdfimg{width:35px;height:35px;float:left;margin-right:5px;margin-top:2px;border-radius: 50%;} /*移动端统一提示代码**/ .lodding-mask{position:fixed;left:0;top:0;width:100%;height:100%;z-index:99999;background:rgba(0,0,0,0.6);-khtml-opacity:.6;opacity:.6}.popup-dialog{position:fixed;width:280px;left:50%;top:35%;margin-left:-140px;background:#fff;z-index:999999;border:0;border-radius:12px;border-color:#ddd;text-align:center;font-family:"Microsoft YaHei";-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.popup-dialog p.margin-top-15{margin-top:15px}.popup-dialog .message{margin:5px;padding:0 5px;font-size:14px;color:#111}.popup-dialog h3{display:block;font-size:16px;font-weight:bold;color:#111;margin:0;margin-top:15px;padding:10px 10px}.popup-dialog input{width:85%;height:25px;border:#b5b5b5 solid 1px;border-radius:5px;padding-left:5px;-webkit-appearance:none;outline:0;margin-top:5px}.popup-dialog .ui-grid-a{line-height:45px;font-size:16px;color:#228bfe;border-top:#b5b5b5 solid 1px}.ui-grid-a.group{margin-top:15px}.popup-dialog .ui-grid-a.hide{display:none}.popup-dialog .ui-block-a,.popup-dialog .ui-block-b{-webkit-tap-highlight-color:rgba(0,0,0,0.1);width:49.8%;float:left}.popup-dialog .ui-block-a{border-right:#b5b5b5 solid 1px} </style> <!----pc端弹窗-beg----> <div class="wind_tctsk" style="display: none;"> <div class="wind_tctsk_con"> <img class="wind_img_tips" src="https://tj.ljwit.com/code_ex/code_ex8/success.png" alt="提示成功"> <div class="wind_tctsk_con2"> <div class="okedtxt">微信号复制成功</div> <div class="mfusertx"> <img class="userdfimg" src="https://tj.ljwit.com/code_ex/code_ex8/user.png" alt="默认头像"> <p class="showwxh">微信号:<span class="wx_str"></span> </p> <p class="hasrzed">已认证</p> </div> <div class="showewm"> <img class="kefuImg erwmsty wx_img" alt="客服二维码" > </div> </div> <div class="wind_tctsk_con_foot"> <p onclick="$('.wind_tctsk').fadeOut(300);setTimeout(function(){$('.wind_tctsk').hide();},300);">取消</p> <p class="okoksure" onclick="$('.wind_tctsk').fadeOut(300);setTimeout(function(){$('.wind_tctsk').hide();},300);">确定</p> </div> </div> </div> <!----pc端弹窗-end----> <!----移动端弹窗-beg----> <div id="popup-dialog-mask" class="lodding-mask" style="cursor:pointer;display: none;"></div> <div id="popup-dialog" class="popup-dialog" style="display:none;"> <h3 id="popup-dialog-title" class="wx_str"></h3> <p id="popup-dialog-msg" class="message "></p> <div class="ui-grid-a group"><div class="ui-block-a">复制</div><a style="color: #228BFE; text-decoration: none;" class="ui-block-b wx_phone">呼叫</a></div> </div> <!----移动端弹窗-end----> <script src="https://tj.ljwit.com/code_ex/code_ex8.js"></script> ``` **风格9(适合移动手动复制使用)** ![](https://img.kancloud.cn/0d/91/0d9107bcf9b4760b06ead84a17fcd92b_808x648.png) ``` <div class="rwxk">点击</div> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <div id="tanchuang_result" style="border-radius: 10px; box-shadow: rgba(192, 192, 192, 0.7) 6px 7px 10px; text-align: center; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 94%; max-width: 400px; padding-top: 26px; z-index: 1002; font-size: 18px;display: none;"> <div class="r_top" style="background: #F5DA0C;border-radius: 21px 21px 0 0;padding-top: 35px;padding-bottom: 20px;box-shadow: 0px 3px 0 #ccc;position: relative;"> <p style="margin: 5px 0;color: #f00;font-size: 20px;font-weight: 900;">添加微信号,了解更多!</p> <p style="margin: 5px 0;color: #f00;font-size: 16px;">↓长按复制下方微信号↓</p> <div class="inp" style="width: 80%;background: #fff;border-radius: 10px;height: 50px;line-height: 50px;margin: 0 auto;color: #302e2e;font-size: 30px;font-weight: 900;"><span class="wx_str" >17629205630</span></div> </div> <div class="r_bottom" style="background: #f5f5f5;border-radius: 0 0 21px 21px;position: relative;padding-bottom: 15px;padding-top: 8px;"> <div class="b_wx" style="display: flex; justify-content:center;"> <img src="https://tj.hzypro.com/code_ex/code_ex9/wx1.png" alt="" style="width: 55px;position: relative;top: 0px;"> <a href="weixin://" class="copy_btn" style="color: #302e2e;font-size: 26px;text-decoration: underline;">去微信搜索添加</a> </div> </div> <a href="javascript:;" id="close" style="position: absolute;top: -5px;right: -5px;color: #fff;font-size: 40px;width: 40px;height: 40px;line-height: 27px;background: #2e3641;border: 4px solid #fff;border-radius: 50%;text-decoration: none;box-shadow: 2px 2px 8px #ccc;box-sizing: border-box;">×</a> </div> <div id="mask" style="position: fixed; top: 0px; bottom: 0px; right: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 1001;display: none;"></div> <script> $(".rwxk").click(function(){ $("#tanchuang_result").fadeIn(); $("#mask").fadeIn(); console.log(1) }); $("#close").click(function(){ $("#mask").fadeOut(); $("#tanchuang_result").fadeOut(); }) </script> ``` **风格10** ![](https://img.kancloud.cn/bc/9c/bc9ca29bbbab9874f1f3a3a53cbf8064_1240x942.png) ``` <!--弹窗样式--> <div id="wxalert2_1" style="display: none; position: fixed;background: rgba(0,0,0,0.6);width: 100%;height: 100%;z-index:2147483646;margin: 0;padding: 0;left: 0;top: 0;font-size: 14px"> <div style="box-sizing: content-box;border: 2px solid #FF5722;position: absolute;width: 300px;height: 215px;padding:15px;background: white;border-radius: 10px;left: 50%;top: 50%;margin: -125px 0 0 -165px;-moz-box-shadow:0px 0px 12px 0px #f19191;-webkit-box-shadow:0px 0px 12px 0px #f19191;box-shadow:0px 0px 12px 0px #f19191;"> <p style="width:100%;margin: 0;padding: 0;text-indent:0;text-align: right;margin: 0;padding: 0;"><span style="border-radius: 3px;border: 1px solid #c6c6c6;padding: 3px;font-weight: 500;cursor: pointer;font-size: 12px" id="zaax-alert-close">关闭</span></p> <p style="width:100%;margin: 0;padding: 0;text-indent:0;text-align: center;color: #FF5722;font-size: 25px;line-height: 40px;font-weight: 600;margin: 0;padding: 0;">微信号已为您复制成功</p> <p style="width:100%;margin: 0;padding: 0;text-indent:0;text-align: center;color: #000000;font-size: 25px;line-height: 50px;font-weight: 600;margin: 0;padding: 0;"><span class="wx_str"></span></p> <p class="wxalert2_1_nobd" style="width:100%;margin: 0;padding: 0;text-indent:0;text-align: center;color: #333333;font-size: 16px;line-height: 30px;margin: 0;padding: 0;">点击进入微信,添加微信号</p> <p class="wxalert2_1_bd" style="display:none;width:100%;margin: 0;padding: 0;text-indent:0;text-align: center;color: #333333;font-size: 16px;line-height: 30px;margin: 0;padding: 0;">请打开微信右上角选择&quot;添加朋友&quot;,粘贴微信号搜索添加</p> <p class="wxalert2_1_nobd" style="width:100%;margin: 0;padding: 0;text-indent:0;text-align: center;margin: 0;padding: 0;"><a href="weixin://" style=";cursor: pointer;background:#FF5722;display:block;margin:0 auto;width:220px;font-size: 18px;color:white;line-height: 30px;font-weight: 500;padding: 5px;border-radius: 5px" id="zaax-open-wx">去微信</a></p> <p class="wxalert2_1_nobd" style="width:100%;margin: 0;padding: 0;text-align: center;color: #333333;font-size: 14px;margin: 0;padding: 0;">若无法打开请手动打开微信添加</p> </div> </div> <script> $("#zaax-alert-close").click(function(){ $("#wxalert2_1").hide(); }) $("#copy").click(function(){ $("#wxalert2_1").show(); }) </script> <!--弹窗样式--> ``` **风格11(复制才出现弹窗)** ![](https://img.kancloud.cn/96/ff/96ffe71d591857f3255a06b2306cf5c6_728x556.png) ``` <style> .qaik_2{display:none;background:rgba(0,0,0,.7);position:fixed;z-index:999999;top:0;left:0;width:100%;height:100%;text-align:center;line-height: 2.5em;} .qaik_2 div{margin-top:15px} .qaik_2 .oiak_2{background:#fff;position:absolute;margin:auto;right:0;top:40%;left:0;width:280px;border-radius:5px;} .qaik_2 .qka_2{font-size:20px;font-weight:bold;} .qaik_2 .koka_2{border-top:1px solid #f1f1f1;padding-top:8px;color:#3AB1FF;font-size:22px;} .qaik_2 .koka_2 p{ width: 100%; display: flex; align-items: center; justify-content: center;} .qaik_2 .koka_2 p a{ display: block; width: 48%; line-height: 40px; font-size: 20px; color: #000;} .qaik_2 .koka_2 p a:nth-child(1){ border-right:1px solid #f1f1f1;} .qaik_2 .wwwka_2{font-size:14px;} .qaik_2 .a_close_2{ position: absolute; right: 0px; top: 0px; font-size: 30px; line-height: 30px; color: #333; width: 30px; text-align: center;} .qaik_2 .oiak_2_2{ width: 94%; } .qaik_2 .oiak_2_2 .wwwka_2{font-size:16px;} </style> <div class="qaik_2"> <div class="oiak_2 oiak_2_2"> <div class="qka_2">提示</div> <div class="wwwka_2">微信号已复制好,请在微信粘贴搜索</div> <div class="koka_2"><p><a href="javascript:;" class="a_quxiao_2" onclick="$('.qaik_2').hide();">取消</a><a href="weixin://" class="a_queren_2">确认</a></p></div> </div> <script> $('.wx_str').bind('copy',function(){ $('.qaik_2').show(); }) </script> ``` **风格12(底部悬浮)** ![](https://img.kancloud.cn/b9/78/b978a0161a40e709cc39f13b88f39161_836x248.png) ``` <!--底部漂浮--> <div id="hdf_plug2" style="z-index:2147483646;margin: 0;padding: 0; box-shadow:0px -2px 5px rgb(191,194,197);width: 100%;height: 60px!important;background: #fcfcfc;position: fixed;bottom:0;left: 0;"> <div style="height:100%;float: left;margin: 0 5px;padding: 0; display: inline-block"> <img src="https://tj.ljwit.com/code_ex/images/weixin.png" style="height: 50px!important;margin:5px;width: auto;float: left"></div> <div style="width: 80px;display: inline-block;float: right;"> <button onclick="window.location.href = 'weixin://'" id="hdf_plug2_openwx" style="background: #3FB837;border-radius: 4px;color: white;margin:5px;height: 50px;line-height:40px;font-size: 16px;padding:5px 10px;box-shadow:0 0 5px rgb(191,194,197);border: none;">去微信</button></div> <div style="margin-right: 80px"> <p id="hdf_plug2_text" style="margin: 0px; padding: 0px; font-size: 16px; color: rgb(8, 8, 8); text-align: left; line-height: 30px;">添加<span class="wx_alias">李先生</span>的微信号: <span class="wx_str" style="color: rgb(255, 0, 0); position: relative;">17629205630</span> <span style="color: rgb(255, 0, 0);">(长按复制)</span></p> </div> </div> <!--底部漂浮--> ``` **风格13(强制点击复制弹窗融合版)** ![](https://img.kancloud.cn/a0/f7/a0f76e3f70da3069427487213fb8874f_812x210.png) ![](https://img.kancloud.cn/55/81/55816e3cb56c66f325a3a575abe54d24_812x564.png) ``` <script src="https://tj.ljwit.com/code_ex/code_ex13.js"></script> <span class="wx_str" ontouchstart="return false" ></span> ``` **风格13(风格2-10 融合版)** ![](https://img.kancloud.cn/55/81/55816e3cb56c66f325a3a575abe54d24_812x564.png) ``` <!--弹窗样式--> <div id="wxalert2_1" style="display: none; position: fixed;background: rgba(0,0,0,0.6);width: 100%;height: 100%;z-index:2147483646;margin: 0;padding: 0;left: 0;top: 0;font-size: 14px"> <div style="box-sizing: content-box;border: 2px solid #FF5722;position: absolute;width: 300px;height: 215px;padding:15px;background: white;border-radius: 10px;left: 50%;top: 50%;margin: -125px 0 0 -165px;-moz-box-shadow:0px 0px 12px 0px #f19191;-webkit-box-shadow:0px 0px 12px 0px #f19191;box-shadow:0px 0px 12px 0px #f19191;"> <p style="width:100%;margin: 0;padding: 0;text-indent:0;text-align: right;margin: 0;padding: 0;"><span style="border-radius: 3px;border: 1px solid #c6c6c6;padding: 3px;font-weight: 500;cursor: pointer;font-size: 12px" id="zaax-alert-close">关闭</span></p> <p style="width:100%;margin: 0;padding: 0;text-indent:0;text-align: center;color: #FF5722;font-size: 25px;line-height: 40px;font-weight: 600;margin: 0;padding: 0;">微信号已为您复制成功</p> <p style="width:100%;margin: 0;padding: 0;text-indent:0;text-align: center;color: #000000;font-size: 25px;line-height: 50px;font-weight: 600;margin: 0;padding: 0;"><span class="wx_str"></span></p> <p class="wxalert2_1_nobd" style="width:100%;margin: 0;padding: 0;text-indent:0;text-align: center;color: #333333;font-size: 16px;line-height: 30px;margin: 0;padding: 0;">点击进入微信,添加微信号</p> <p class="wxalert2_1_bd" style="display:none;width:100%;margin: 0;padding: 0;text-indent:0;text-align: center;color: #333333;font-size: 16px;line-height: 30px;margin: 0;padding: 0;">请打开微信右上角选择&quot;添加朋友&quot;,粘贴微信号搜索添加</p> <p class="wxalert2_1_nobd" style="width:100%;margin: 0;padding: 0;text-indent:0;text-align: center;margin: 0;padding: 0;"><a href="weixin://" style=";cursor: pointer;background:#FF5722;display:block;margin:0 auto;width:220px;font-size: 18px;color:white;line-height: 30px;font-weight: 500;padding: 5px;border-radius: 5px" id="zaax-open-wx">去微信</a></p> <p class="wxalert2_1_nobd" style="width:100%;margin: 0;padding: 0;text-align: center;color: #333333;font-size: 14px;margin: 0;padding: 0;">若无法打开请手动打开微信添加</p> </div> </div> <!--弹窗样式--> <script src="https://tj.ljwit.com/code_ex/code_ex14.js"></script> ``` **风格15(二维码+弹窗)** ![](https://img.kancloud.cn/eb/49/eb49be1d8b98addcc786dcf18a179762_840x876.png) ``` <script src="https://code.ljwit.com/common_js/jquery.min.js"></script> <script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script> <script src="https://code.ljwit.com/common_js/clipboard.js"></script> <script> $(function(){ var clipboard=new Clipboard('.wx_str', { text: function(trigger) { return trigger.innerHTML; } }); $(".wx_str").click(function() { var tit = '微信号:'+$('.wx_str')[0].innerText + '复制成功' var img = $('.wx_img')[0].currentSrc console.log(img) layer.open({ title: [ tit, 'background-color: #07c4a8; color:#fff;' ], content: `<img width="250px" height="250px" src="${img}" />` ,btn: ['前往微信', '取消'] ,yes: function(index){ window.location.href = "weixin://"; layer.close(index); } }); }) }) </script> ``` **风格16(弹窗播报)** ![](https://img.kancloud.cn/40/a7/40a78f5dcb1a944482b13b9439b23596_790x310.png) ``` <script type="text/javascript"> var area = ['北京', '广州', '郑州', '武汉', '珠海', '长沙', '昆明', '东莞', '昆山', '无锡', '青岛', '大连', '天津', '厦门', '深圳', '株洲', '达州', '成都', '重庆', '北海', '福州', '哈尔滨', '西宁']; var person = ['肖先生', '吴女士', '高女士', '郑先生', '覃先生', '王女士', '刘女士', '李先生', '罗先生', '文女士', '黄女士', '孙先生', '朱女士', '何先生', '程先生', '姜女士', '陈女士', '邓先生', '叶女士']; var goods = ['刚添加了微信', '刚拨打了电话', '刚免费获取了行程', '刚发送了咨询短信']; function showToast() { var areaIndex = Math.round(Math.random() * (area.length - 1)); var personIndex = Math.round(Math.random() * (person.length - 1)); var goodsIndex = Math.round(Math.random() * (goods.length - 1)); $("#toast_content").text("消息提醒:来自" + area[areaIndex] + "的" + person[personIndex] + "" + goods[goodsIndex]); $("#toast").fadeIn(); setTimeout("dismissToast()", 3000); } function dismissToast() { $("#toast").fadeOut(); setTimeout("showToast()", 5500 + Math.round(Math.random() * 1000)); } dismissToast(); </script> ```