问题描述:
做一个底部点击【添加微信】,出现一个弹窗,出现弹窗的同时复制指定的值到粘贴板上。
解决办法:
<div id="copykey" style="display: none">tuln1406a</div>
<div class="changan" id="toolbar">
<div class="firdiv"> 添加微信好友了解产品 </div>
<div class="secdive"><a onclick="dkcf()" title="微信"><span>添加微信</span></a></div>
</div>
<div id="wxnr" >
<div class="nrdf">
<i onclick="gbcf()">X</i>
<img src="333.png" alt=""/>
<p class="fuzhi">复制成功</p>
<p class="wei" id="input">微信号:tulan1406</p>
<p class="wei">添加微信好友,详细了解产品</p>
<p class="zhi" onclick="gbcf()"><span class="wx">知道了</span></p>
</div>
</div>
<style>
#toolbar { display:block; position: fixed; bottom: 0; width: 100%; z-index: 888; height: 57px; left: 0; background: black}
#toolbar .firdiv { float: left; width: 60%; color:black;line-height: 60px;font-size: 15px;background: white;}
#toolbar .secdive{float: right;width: 40%;background: #1AAD17;line-height: 60px}
#toolbar span{font-weight: 800;font-size: 16px;color: #fff;}
.changan{ width:100%; max-width:750px; height:5.125rem; line-height:5.125rem; text-align:center; color:#fff; font-size:22px; position:fixed; bottom:0; box-shadow:0px 0px 10px rgba(0,0,0,0.4);}
#wxnr { width: 100%; height: 100%; max-width: 640px; min-width: 320px; position: fixed; top: 0; z-index: 1000; display: none; background: rgba(0,0,0,.6); }
#wxnr .nrdf { margin: auto; position: absolute; top: 30%; left: 0; right: 0; width: 80%; height: 37%; padding: 12px; padding-top: 26px; margin-top: -12px; text-align: center; background-color: #FFFFFF; box-shadow: 0px 2px 6px #777; -webkit-box-shadow: 0px 2px 6px #777; -moz-box-shadow: 0px 2px 6px #777; border-radius: 10px; }
#wxnr img { width: 55px; height: 55px; display: block; margin: 0 auto; }
#wxnr .fuzhi { font-size: 20px; line-height: 15px; text-align: center; margin-top: 10px;font-weight: 800}
#wxnr .wei { font-size: 15px; line-height: 15px; text-align: center; margin-top: 10px;color: #676767}
#wxnr i { position: absolute;top: 8px;right: 13px;width: 15px;height: 15px;font-size: 0.px;line-height: 16px;text-align: center;color: gray;font-weight: bold;font-style: normal;cursor: pointer; }
#wxnr .zhi {padding: 0 25%;}
#wxnr p .wx { padding:13px 0;background: #1AAD17;border-radius: 23px;display: block; width: 100%;color: white;}
</style>
<script>
/* 打开微信弹窗 并复制指定值*/
function dkcf(){
$('#wxnr').fadeIn("fast");
const div = document.getElementById("copykey");
const input = document.createElement("input");
document.body.appendChild(input);
input.value = div.innerText;
input.select();
try {
if (document.execCommand("copy", false)) {
layer.msg("div 内容复制成功");
} else {
layer.msg("div 内容复制失败");
}
} catch (error) {
console.log(error, "error");
} finally {
input.remove();
}
}
/* 关闭微信弹窗 */
function gbcf(){
$('#wxnr').fadeOut("fast");
}
</script>