News Contents
信息中心

复制微信号并跳转到微信界面

发表日期:2019/6/10      浏览次数:

经常遇到需要写复制微信号并跳转到微信界面的功能,这里整理了两种样式,方便下次直接拿来使用。


<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>

20190124155329152.png

盛大建站承接个人、公司、企业的网站建设、网页设计、网店制作、独立商城制作、外贸网站制作,也承接同行介绍的业务,欢迎联系!
本站承接主要业务如下:
1、提供免备案虚拟主机(网站空间),有独立国内服务器、高速美国服务器、香港服务器、韩国服务器、日本服务器,>> http://www.fuanxx.com
2、网站建设:个人网店制作、企业建站、公司网站、新闻、下载等;论坛、博客网站搭建,承接外贸英文站制作
3、承接阿里巴巴、京东、淘宝、天猫等的商品数据采集
4、网站防钓鱼,可以过360、QQ、搜狗、金山、微信拦截
5、要就发IP网站限制访问系统,防止同行抄袭并保障海外客户访问不受影响,>> http://www.198ip.com
  下一篇:没有了!
十年如一日,我们专注于提供高品质 定制网站建设服务!
您的信任,我们的责任,期待与您的合作!