广告位

您现在的位置是:主页 > 网页模板 >

点击按钮复制微信号并弹出微信 底部悬浮banner按钮引导加微信

2020-07-25 15:30网页模板 人已围观

简介将下面代码复制放到你想要加载咨询条的网页的footer前 预览地址: https://68up.com/test/wechat.html !DOCTYPE html html lang=en head meta charset=UTF-8 script src=http://libs.baidu.com/jquery/1.9.0/jquery.js/script scr...

将下面代码复制放到你想要加载咨询条的网页的<footer>前
预览地址:https://68up.com/test/wechat.html
<!DOCTYPE html>    
<html lang="en">    
<head>    
    <meta charset="UTF-8">    
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>   
    <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>  
  
    <title>复制按钮</title>    
    <style>
.margingT {
margin-bottom: 60px;
}
 
.bottomAD {
-webkit-box-sizing: border-box;
height: 80px;
position: fixed;
bottom: 0;
left: 0;
z-index: 1000;
padding: 0 10px;
overflow: hidden;
width: 100%;
background: rgba(0, 0, 0, .8);
}
 
.bottom-pic {
position: absolute;
top: 10px;
width: 60px;
height: 60px;
overflow: hidden;
-webkit-border-radius: 10px;
border-radius: 10px;
}
 
.bottom-pic img {
width: 100%;
height: 100%;
}
 
.bottom-text {
margin-left: 0px;
line-height: 80px;
font-size: 16px;
color: #fff;
}
 
.bottom-btn {
position: absolute;
top: 20px;
right: 10px;
height: 40px;
line-height: 40px;
color: #fff;
background-color: #60b900;
border-radius: 6px;
text-align: center;
font-size: 16px;
padding: 0 5px;
font-weight: bold;
}
 
.bottomAD a {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
 
</style>
 
</head>    
<body>   
 
微信号:<span id="target">jitao558</span>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn">    
    点击复制    
</button>     
 
 
<div class="bottomAD" id="bottomAD">
<div class="bottom-con">
 
<div class="bottom-text" id="bottomText">加微信的话术 微信:jitao558</div>
<div class="bottom-btn" data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn">点击复制</div>
</div>
</div>
</body>    
<script>    
    $(document).ready(function(){       
        var clipboard = new Clipboard('#copy_btn');    
        clipboard.on('success', function(e) {    
            alert("微信号复制成功",1500); 
            window.location.href='weixin://';
            e.clearSelection();    
            console.log(e.clearSelection);    
        });    
    });    
</script>    
</html>

Tags:

广告位
    广告位

本栏推荐

    广告位

标签云

站点信息

  • 文章统计74篇文章
  • 标签管理标签云
  • 微信公众号:扫描二维码,关注我们