点击按钮,实现复制文本,到剪切板

css样式  

 #m2_roll {

        width: 494px;

        height: 368px;

        background: url(/static/activity/mayday/yqhyct.png) center center no-repeat;

        position: relative;

    }

   #m2_roll .link {

        width: 450px;

        height: 100px;

        padding: 10px 20px;

        line-height: 36px;

        font-size: 16px;

        color: #ff5e38;

        position: absolute;

        bottom: 125px;

        margin-left: -225px;

        left: 50%;

        text-align: center;

    }

 

    #m2_roll .link p {

        line-height: 74px;

    }

   #m2_roll .copy {

        width: 131px;

        height: 32px;

        position: absolute;

        bottom: 50x;

        cursor: pointer;

        text-align: center;

        line-height: 30px;

        bottom: 44px;

        left: 50%;

        margin-left: -66px;

    }

 #m2_roll .link_input {

        position: absolute;

        opacity: 0;

        /* display: none; */

    }

   //修改弹窗右上角x的样式

 .r_award,

 .m_award {

        background: transparent !important;

        box-shadow: none !important;

    }

 

    .r_award .layui-layer-close2 {

        width: 28px;

        height: 28px;

        background: transparent !important;

        right: -15px !important;

        top: 0px !important;

    }

HTML代码

点击按钮 

<div class="m2_roll"></div>

弹框代码: 

<div id="m2_roll" class="modal">

        <div class="copy"></div>

       <div class="link"><p>http://www.meijiehezi.com/LaborInvite.html</p></div>

        <input class="link_input" readonly value="http://www.meijiehezi.com/LaborInvite.html">

    </div>

注意 : 不能直接复制div里面的文本,一般隐藏一个input,文本设置为input里面的value值,要能复制,还要在input里面加 readonly ;

写input的css样式时,不能设置display:none,否则就不能复制;input要隐藏起来,可以设置opacity: 0;

 

点击弹框事件:

  layui.use('layer', function () {

            var layer = layui.layer;

     $(".m2_roll").on("click", function () {

                var m2_roll = layer.open({

                    type: 1,

                    title: false,

                    scrollbar: false,

                    area: ['494px', '368px'],

                    content: $("#m2_roll"),

                    skin: 'm_award'

                });

                $("#m2_roll .copy").off().on("click", function (e) {

                    e.stopPropagation();

                    $(".link_input").select();

                    document.execCommand("Copy");

                    layer.msg("邀请链接已复制");

                });

            });

})