經常遇到需要寫復制微信號並跳轉到微信界面的功能,這里整理了兩種樣式,方便下次直接拿來使用。
<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>
