<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="applicable-device" content="pc,mobile">
<script src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body>
<span id="popupBtn" onclick="copyHtmlLink();" >复制微信号</span>
<textarea id="copy" style="display:none;"></textarea>
<script>
/**
* 复制内容
*/
function copyHtmlLink() {
var str= "{label:wx}";
copyText(str);
}
/**
* 将文本内容复制到剪切板
* @param str 复制内容
*/
function copyText(str) {
$('#copy').text(str).show();
var ele = document.getElementById("copy");
ele.select();
document.execCommand('copy', false, null);
$('#copy').hide();
// alert('复制成功!');
}
/**
* 弹窗
*/
$(document).ready(function() {
$("#popupBtn").click(function() {
$("#popupContainer").fadeIn();
});
$("#closeBtn").click(function() {
$("#popupContainer").fadeOut();
});
});
</script>
<div id="popupContainer" class="erx-weixin-open erx-weixin-copy"><div><i class="iconfont erx-wx-icon-success"></i><h5>复制成功</h5><div><div>微信号: <em>{label:wx}</em><br>添加微信好友, 获取更多信息</div><img src="{pboot:companyweixin}" class="erxshow qrcode-ez"><a href="weixin://" class="erx-wx-close erx-wx-btn">我知道了</a></div><span class="erx-wx-close iconfont erx-wx-icon-close" id="closeBtn"></span></div></div>
<style>
.erx-weixin-open{display:none;position:fixed;top:0;left:0;width:100%;height:100%;font-size:14px;text-align:center;background-color:rgba(0,0,0,.5);z-index:99999;}
.erx-weixin-open.erxact{display:block;}
.erx-weixin-open:after{content:'';display:inline-block;width:0;height:100%;vertical-align:middle;}
.erx-wx-box{position:relative;display:inline-block;line-height:1.35;width:320px;max-width:96%;color:#111;background-color:#fff;padding:20px;border-radius:15px;vertical-align:middle;box-sizing:border-box;}
.erx-wx-box i, .erx-wx-box em, .erx-weixin-bar em, .erx-wx-user em{font-style:normal;}
.erx-wx-box .erx-wx-icon-success{color:#1aad19;font-size:40px;}
.erx-wx-box h5{margin:5px 0 9px;font-size:18px;font-weight:bold;padding:0;background:none;border:0;}
.erx-wx-box em, .erx-wx-user em, .erx-wx-box em a, .erx-wx-user em a{color:#f00;font-weight:bold;}
.erx-wx-ow{max-height:72vh;overflow-y:auto;}
.erx-wx-box .qrcode-ez{max-width:200px;margin:5px auto 0;}
.qrcode-ez{display:none;}
.qrcode-ez.erxshow{display:block;}
.erx-wx-box .add-ez{display:block;max-width:90%;margin:8px auto 0;}
a.erx-wx-btn, span.erx-wx-btn{display:inline-block;margin:12px 0;line-height:38px;color:#fff !important;font-size:14px;background-color:#1aad19;padding:0 25px;border-radius:5px;cursor:pointer;}
a.erx-wx-btn:hover{color:#eee;}
.erx-wx-btn i{display:inline-block;margin-left:3px;font-size:12px;opacity:.6;transform:scale(.9);}
.erx-wx-box .erx-wx-icon-close{position:absolute;top:8px;right:8px;font-size:24px;cursor:pointer;}
.erx-wx-box .erx-wx-icon-close:hover{color:#f30;}
.erx-weixin-ball{position:fixed;right:30px;bottom:98px;width:50px;height:50px;line-height:50px;text-align:center;background-color:#1aad19;cursor:pointer;animation:heartbeat 1s infinite;border-radius:50%;z-index:99998;}
.erx-weixin-ball .iconfont, .erx-wx-tel .iconfont, .erx-wx-ico .iconfont{color:#fff;font-size:25px;}
.erx-weixin-top{top:0;}
.erx-weixin-bot{bottom:0;}
.erx-weixin-bar{position:fixed;left:0;width:100%;height:48px;line-height:48px;color:#fff;font-size:14px;text-align:center;background-color:#393939;z-index:99998;}
.erx-weixin-bar > span, .erx-weixin-bar > a{display:inline-block;height:100%;}
.erx-wx-tel{position:relative;float:left;width:48px;background-color:#f80;}
.erx-wx-tel > div{position:absolute;top:3px;left:-200%;height:42px;line-height:42px;color:#f80;font-size:16px;font-weight:bold;white-space:nowrap;background:#eee;padding:0 12px 0 8px;border-radius:0 30px 30px 0;opacity:0;transition:all .3s ease-out;}
.erx-wx-tel.erxact > div{left:100%;opacity:1;}
.erx-wx-txt, .erx-wx-txt a{color:#F4E41C;font-size:12px;}
.erx-wx-add{float:right;background-color:#0C3FD6;padding:0 18px;cursor:pointer;}
.erx-wx-add .iconfont, .erx-weixin-insert .iconfont{margin-right:5px;}
.erx-weixin-insert{display:flex;align-items:center;margin:1em 0;line-height:1.68;}
.erx-weixin-insert .qrcode-ez{width:110px;margin-right:12px;}
.erx-weixin-insert span.erx-wx-btn{margin:12px 0 0;background-color:#0C3FD6;}
.erx-weixin-blank{height:48px;overflow:hidden;clear:both;}
.erx-wx-ico{display:inline-block;width:48px;height:48px;line-height:48px;text-align:center;background-color:#1aad19;border-radius:50%;}
@font-face {font-family: "iconfont";
src: url('../iconfont.eot?t=1598172403653'); /* IE9 */
src: url('../iconfont.eot?t=1598172403653#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAATAAAsAAAAACTAAAARxAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqFUIRqATYCJAMUCwwABCAFhG0HSBv2B8iOUElOWZd1TdURfL8f+z1XHiKSRJNkvEOiQiKRfDqJRCeRGiWIdvhSAsO/p70sc3ZuB2ay0sPcvgpJBuJIpWd+ST04ZrpMG+bZbC6RZZ1UNhpPcDaLiK+iF/0Hxadfhlcd5G5cJtBumgdkLymjAOgr9FmBOBUJyoF+wqpUMEOroSnYWNaQEaCjNd1qXQHceb8f/8Fq6JPUTL/q4CSRB2K+fd9sRls0LYryYrCwPzfYbWSsAApxVug9hQbxFah2OaptC1CirZLUV7+AN+FvNms0YOWK9O2GbC1/eEkmGrq2E2O3EoVvX0tA8B0gLdKFY7OEdZuxzvmi64Z2dOANiA2gUya5G8nIiFEDw34D6v0mWUGm9RjDEHeeFdy9W8gu4GB772LY/TJErSbWHm050nes9XjZumOIo+5PaGpBqDs39CdjhQSmVsv7NrVu7t/YsgHzlwiIAqh+y/G786zccCkADrzzgmAectQvCxHmWYx1v/Duc8vD+lyRmF0wsdGEc/dl6kMI5kXtBGuDw5ozTueyDoUdizrmd8pvGYJMWCx33+w8fy+7cO6SsswJ1s7Yu4Xh2N3PnstVm00A6nDemgXsXr534VoTTuHc9YuNCc78RetYwbviWVY9P3ds1zqBIk/aS0HR0YJcvwTPjg2EoXMS5mRTWWsCRj4eqejZkROca1Tm2NaumGFqmRMSP2Bl+M4itOP+9pVaK9H7O9FWtM0RBUdEPtXpTbZX6sZ65rTrd5r+8f5NWf789JE+/zTYl3FxxayUIqF3g1bzjo2xY0U6r+4Y5eXZIyNrnvS69znrzMmtyqrFWLNURXIsoSuAWBsYIeYNlY1MzpT1qDoS0lfEL0tZZQfw3DKEfB5MaIxrMmJlVicdyO58vSt5YFaMYQevXTDHz39Z8FLtQ3rU5JDkxKP9BXO3T6212R/tecPJa40TOzp/9aJpRb+cjmaKroX8jZEX5GcH+yan+EZYXbC5t0CcVHLE1lEflAeG2aRu3MQwNKVRXZ98GQgB/P7UCMo0dLHmj6aumKEtAJC7080/dJuj47A1pVMivuljBXwJM78QSTtCBVYAfgQdsOyP0dReO95WRaHba7m+6lIpthB/ZG0Sqn3/gz/xcxh/cbDfk370Q+BiQquhCJIWU5C1mkEW7ApUHdah0WoT2i1L3t5hAAkVpQ1LOhGEXtsh6fYIWa+ryIJ9DNWwz9DoDRTaHcaMAzvMhcgwnoTlNOThFbW4iKuQ800HbeiX5kFBpbScjCs8NgFJShTCfb180qlkKIdkH0uoKoEfTfNxPqmQ4UnoOiiVKnAlqRBDLu0lpGllmLc3v+iLvLgKGTC0iwSVo0E8uAq1cCJcCnJ8pzvNMPPzeSCBSlLlyIqmsjABIlFEveN8efEBIJO1clDTuQynVBHwQ6PxqWl8JAUZXBJ2Q1IjroBTFo8Tg7hoXoQtokphvEk7PlTrNb5edo1l32tL/UE1UuQoUaPRXENRjUiuR1VyuZCi0L2s0eFKFRQEAAAAAA==') format('woff2'),
url('../iconfont.woff?t=1598172403653') format('woff'),
url('../iconfont.ttf?t=1598172403653') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('../iconfont.svg?t=1598172403653#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont{font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.erx-wx-icon-weixin:before{content:"\e631";}
.erx-wx-icon-success:before{content:"\e63b";}
.erx-wx-icon-tel:before{content:"\e6ab";}
.erx-wx-icon-close:before{content:"\e634";}
@keyframes heartbeat {
50% {
transform: scale(1.1);
}
}
@media only screen and (max-width: 640px) {
.erx-weixin-ball{right:20px;}
.erx-weixin-bar .erx-wx-tel + .erx-wx-txt{display:none;}
.erx-weixin-bar .erx-wx-tel{width:55%;}
.erx-weixin-bar .erx-wx-tel > div{position:static;display:inline-block;height:auto;line-height:1;margin-top:-9px;color:#fff;background:none;opacity:1;vertical-align:middle;}
.erx-weixin-bar .erx-wx-add{width:45%;box-sizing:border-box;}
}
</style>
</body>
</html>转载请注明：js脚本» 复制微信号弹窗带二维码
标签：
