经常遇到需要写复制微信号并跳转到微信界面的功能,这里整理了两种样式,方便下次直接拿来使用。
<style>
a:link{text-decoration:none;}/* 指正常的未被访问过的链接*/
a:visited{text-decoration:none;}/*指已经访问过的链接*/
a:hover{text-decoration:none;}/*指鼠标在链接*/
a:active{text-decoration:none;}/* 指正在点的链接*/
.wx{
width: 90%;
margin-left: 5%;
font-size: 18px;
color:white;
text-align: center;
background-color: #ff7f2e;
border-radius: 5px;
line-height: 40px;
}
.wx a{
font-size: 18px;
color:white;
}
/*弹窗*/
.tan{
width:80%;
height:180px;
background-color:#e8e8e8;
position:fixed;
left:10%;
top:40%;
display:none;
z-index: 200;
}
.kuang{
height:120px;
text-align:center;
padding: 20px 0;
}
.txtcss{
color:red;
font-weight:800;
font-size:20px;
}
.copy{
font-size: 16px;
float: left;
background-color: #5AD700;
padding: 5px 20px;
margin-left: 25%;color: black;
border-radius: 5px;
}
.copy a{color: white;}
.guanbi{
width:20px;
height:20px;
color:red;
margin-top:-130px;
}
</style>
第一种:点击后直接复制并跳转微信界面
<div class="row">
<div class="wx" onclick="copywx()">
<a href="weixin://"><span id="copy_content">136xxxx6510</span>(微信同号),复制跳转微信</a>
</div>
</div>
第二种:点击后出现弹框,复制并跳转微信界面
<div class="row">
<div class="wx" onclick="showwx()">添加微信了解更多</div>
</div>
<!--弹窗-->
<div id='myshow' class="tan">
<div class="kuang">
咨询学费<br/>
了解更多<br/>
请添加微信:<br/>
<span id="copy_content" class="txtcss">136xxxx6510</span>
</div>
<div style="height: 10px;"></div>
<p onclick="copywx()" class="copy"><a href="weixin://">复制并跳转微信</a></p>
<div onclick="closeshow()" class="closeshow pull-right guanbi">x</div>
</div>
<script>
/*点击复制微信号*/
function copywx(){
const range = document.createRange();
range.selectNode(document.getElementById('copy_content'));
const selection = window.getSelection();
if(selection.rangeCount > 0) selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
alert("复制成功!");
}
/*点击出现弹框*/
function showwx(){
var ss=document.getElementById('myshow');
ss.style.display='block';
}
/*关闭弹窗*/
function closeshow(){
var ss=document.getElementById('myshow');
ss.style.display='none';
}
</script>