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("邀请链接已复制");
});
});
})