<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.ljwit.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.ljwit.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> <!-- 消息弹窗 --> <div id="toast" style="position: fixed; z-index: 999; bottom: 17%; text-align: center; width: 100%; max-width: 750px; left: 0px; right: 0px; margin: auto; display: block;"> <span id="toast_content" style="border-radius:32px;background:#999;opacity: 0.9;padding:6px 16px;font-size:14px;"></span> </div> ``` **风格17(基木鱼样式参考)** ![](https://img.kancloud.cn/92/a7/92a7e66bc084a0a7368419d132a2ec9b_698x554.png) ``` <!--弹窗样式--> <div id="wxalert2_1" style="display: block; 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;position: absolute;width: 300px;height: 215px;padding:15px;background: white;border-radius: 10px;left: 50%;top: 50%;margin: -125px 0 0 -165px;"> <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" onclick="$('#wxalert2_1').hide();" id="zaax-alert-close">关闭</span></p> <p style="width:100%;margin: 0;padding: 0;text-indent:0;text-align: center;color: #FF5722;margin: 0;padding: 0;"><img width="50px" src="https://tj.ljwit.com/code_ex/images/wechat_success_icon.png"></p> <p style="width:100%;margin: 0;padding: 0;text-indent:0;text-align: center;color: #000000;font-size: 18px;font-weight: 600;margin: 0;padding: 0;">复制成功</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;">微信号:<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_nobd" style="width:100%;margin: 0;padding: 0;text-indent:0;text-align: center;margin: 0;padding: 0; margin-top: 10px;"><a onclick="$('#wxalert2_1').hide();" style="text-decoration:none;cursor: pointer;background:#1aad17;display:block;margin:0 auto;width:100px;font-size: 18px;color:white;line-height: 30px;font-weight: 500;padding: 5px;border-radius: 5px" id="zaax-open-wx">知道了</a></p> </div> </div> <!--弹窗样式--> ``` **风格18(样式参考)** ![](https://img.kancloud.cn/c4/d9/c4d9c0a17f9ccd93cfb01b9cd7fb1d3a_1036x924.png) ``` <div id="wxalert6_1" style=" display: none; z-index: 2147483646; margin: 0px; padding: 0px; width: 100%; height: 100%; background: rgba(44, 44, 44, 0.48); position: fixed; top: 0px; left: 0px; font-size: 16px; opacity: 1;"> <div style="padding: 0;position: absolute;top: 50%;left:50%;margin-left:-40%;margin-top:-200px;width: 80%;box-sizing: content-box;" id="zaax_alert6_wxh"> <div style="margin: 0;padding: 5px;background: white;width: 100%; border-radius: 10px"> <i style="background:url(https://tj.ljwit.com/code_ex/images/close.png) no-repeat ;background-size: contain;float: right;width:25px;height:25px;text-align: center;margin: 0" id="zaax_alert6_close"></i> <p style="width:100%;text-indent:0;margin: 0;padding: 0;text-align:center;line-height: 35px;height: 35px;font-size: 17px;color: red;font-weight: bold" id="zaax_alert4_wxh">微信号已为您复制成功</p> <p style="width:100%;text-indent:0;margin: 0 0 10px 0;padding:0;text-align:center;line-height: 30px;height: 30px;font-size: 28px;color: #333;font-weight: 500" class="wx_str" ></p> <img style="width: 100%;height: auto;" src="https://tj.ljwit.com/code_ex/images/addwx.gif"> <p style="width:100%;text-indent:0;margin: 6px 0;padding:0;text-align:center;line-height: 30px;font-size: 16px;color: #000;">请按照上图步骤,到微信添加微信号</p> </div> </div> </div> $(".wx_str").click(function() { $('#wxalert6_1').show() }) $("#zaax_alert6_close").click(function() { $('#wxalert6_1').hide() }) ``` **风格18(微信号不带点击复制,任意按钮点击复制参考)** ``` <h1 class="diy_pop_wxbox">点我复制试试</h1> <span class="wx_str" id="wx_str_id" style="display: none;"></span> <script src="https://code.ljwit.com/common_js/clipboard.js"></script> <script> $(function(){ var clipboard=new Clipboard('#wx_str_id', { text: function(trigger) { return trigger.innerHTML; } }); clipboard.on('success', function(e) { alert('已复制微信,请打开微信添加!'); }); clipboard.on('error', function(e) { alert('复制微信失败,请尝试手动复制!'); }); $('.diy_pop_wxbox').click(function(){ $('#wx_str_id').click() }) }) </script> ``` **风格19(移动端显示点击复制 pc显示查看二维码)** ![](https://img.kancloud.cn/8a/36/8a36affaa7282b39c597f13b8c074387_836x186.png) ![](https://img.kancloud.cn/7f/0e/7f0ecaeb1f69b74eeb1e0b425d1b6d98_836x134.png) ``` <p>大家加下我微信号吧<span class="wx_str"></span><span class="diy_pop_wxbox"></span></p> <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> <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> var clipboard = new Clipboard('.wx_str', { text: function(trigger) { return trigger.innerHTML } }); var alertWin = function() { clipboard.on('success', function(e) { if(isPc()){ $('.wind_tctsk').show() }else{ layer.open({content: '复制成功',skin: 'msg',time: 2}); } }); clipboard.on('error', function(e) { layer.msg('复制失败,请手动复制') }) }; $('.wx_str').click(function(){ alertWin() }) $('#popup-dialog-mask').click(function(){ $('#popup-dialog-mask,#popup-dialog').hide() }) $('.ui-block-a').click(function(){ var wx_doms = document.getElementsByClassName('wx_str'); wx_doms[0].click() }) $(".diy_pop_wxbox").bind("click",function(){ if(isPc()){ var wx_doms = document.getElementsByClassName('wx_str'); wx_doms[0].click() $('.wind_tctsk').show() }else{ $('#popup-dialog-mask,#popup-dialog').show() } }) function isPc(){ var userAgentInfo = navigator.userAgent; var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"); var flag = true; for (var v = 0; v < Agents.length; v++) { if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; } } return flag; } //查看二维码图片 var pic="<img style='display:inline !important; padding: 0px; margin: 0px !important; border-radius: 0px; cursor: pointer; vertical-align: middle !important; width: 100px !important; height: auto !important; float: none !important;' src='https://hzytj.ljwit.com/code_ex/images/lookqr.png'>"; if (screen.width <= 720){ //分辨率小于等于1024时 $(".diy_pop_wxbox").text("(点击复制)");//替换class为ml的样式为red; $(".diy_pop_wxbox").css({"color":"red",}); }else{ $(".diy_pop_wxbox").append(pic); } </script> ``` **风格20(点击弹窗)** ![](https://img.kancloud.cn/90/bc/90bc04b21c3f6106d744f7a8033c25f1_688x450.png) ``` <!-----------------弹窗效果-------------> <script src="https://code.ljwit.com/common_js/clipboard.js"></script> <script src="https://code.ljwit.com/common_js/layer_mobile.js"></script> <div id="wxalert10" style="z-index: 2147483646; margin: 0px; padding: 0px; width: 100%; height: 100%; background: rgba(44, 44, 44, 0.48); position: fixed; top: 0px; left: 0px; font-size: 16px; display: none;"> <div style="padding: 0;position: absolute;top: 65%;left:50%;margin-left:-160px;margin-top:-200px;width: 320px;box-sizing: content-box;"> <div style="margin: 0;padding: 0;background: white;width: 100%; border-radius: 5px"> <div style="width:100%;text-indent:0;margin: 0;padding: 0;text-align:center;line-height: 70px;height: 50px;font-size: 18px;color: #000000;"> 是否添加<span class="wx_alias"></span>为好友? </div> <div style="width:100%;text-indent:0;margin: 10px 0;padding:0;text-align:center;line-height: 30px;height: 30px;font-size: 25px;color: #F44336;font-weight: 500" data-status-wx="0"> 微信号: <span class="zaax-wxh wx_str" style="color: rgb(255, 0, 0); cursor: pointer;"></span> </div> <div style="width:100%;text-indent:0;margin:5px 0;padding: 5px 0;text-align:center;line-height: 25px;height: 50px;font-size: 16px;color: #000000;background: #EEEEEE"> 以下三步快速添加好友 <br> ①复制微信号 ②打开微信 ③添加朋友 </div> <div style=" display: flex; justify-content: center; width:100%;text-indent:0;margin: 0;padding:0;border-top: 1px solid #e2e2e2;height: auto;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;background:#F2F2F2;"> <div style="width:50%;height: 45px;display: inline-block;text-align:center;line-height: 45px;font-size: 17px;color: #000;border-right: 1px solid #e2e2e2;margin-left: -1px" id="zaax_alert10_cancel"> 完成 </div> <div style="width:50%;height: 45px;display: inline-block;text-align:center;line-height: 45px;font-size: 17px;color: #4DB4FD;" id="zaax_alert10_copy"> 复制微信号 </div> </div> </div> </div> </div> <span class="wx_str" style="display: none;" id="wx_str_id"></span> <script> $('#zaax_alert10_cancel').click(function(){ $('#wxalert10').hide() }) $('.wx_str').click(function(){ $('#wxalert10').show() }) $(function(){ var clipboard=new Clipboard('#zaax_alert10_copy', { text: function(trigger) { return $('#wx_str_id').text(); } }); $("#zaax_alert10_copy").click(function() { $('#wxalert10').hide() layer.open({ content: '复制成功' ,skin: 'msg' ,time: 3 }); }) }) </script> <!-----------------弹窗效果-------------> ``` **风格21(另类复制)** ``` <style> #copy_content { position: absolute; left: 0; top: 0; opacity: 0; z-index: -10; -webkit-user-select: auto; -moz-user-select: auto; -o-user-select: auto; user-select: auto; display: inline-block; } </style> <span class="wx_str" id="copy_content" ></span> function copyWeixin() { const range = document.createRange(); range.selectNode(document.querySelector("#copy_content")); const selection = window.getSelection(); if (selection.rangeCount > 0) selection.removeAllRanges(); selection.addRange(range); document.execCommand('copy'); } ```