<style>
*{
margin: 0;
padding: 0;
}
.top{
width: 50%;
height: 600px;
margin: 0 auto;
position: relative;
border: 1px solid #ccc;
margin-top: 20px;
border-radius: 10px;
background: url("img/3.jpg");
}
.copyde {
position: absolute;
left: 50%;
top:10%;
transform: translate(-50%);
background-color:#229ffd;
border:1px solid #229ffd;
font-size:12px;
height:30px;
line-height:30px;
}
#copycopy {
margin:30px;
color:red;
}
#copytwo {
width:140px;
height:25px;
}
#copy {
height:30px;
font-size:13px;
}
#copyhide {
margin-top:5px;
border:1px solid #229ffd;
width:300px;
height:150px;
background-color:white;
position: absolute;
left: 50%;
top:20%;
transform: translate(-50%);
}
</style>
$(function() {
$("#copyhide").hide();
$("#copyone").hide();
$(".copyde").eq(0).click(function() {
$(".copyde").eq(1).show();
$(".copyde").eq(0).hide();
});
$(".copyde").eq(1).click(function() {
$(".copyde").eq(0).show();
$(".copyde").eq(1).hide();
});
$(".copyde").click(function() {
$("#copyhide").toggle();
var c = document.getElementById("copyone");
var b = c.innerHTML;
$("#copytwo").val(b);
});
$("#copy").click(function() {
var Url = document.getElementById("copytwo");
Url.select();
document.execCommand("Copy");
alert("复制成功!");
})
});
<div class="top">
<input type="button" value="点击打开链接" class="copyde">
<input type="button" value="点击关闭链接" class="copyde" hidden="hidden">
<div id="copyhide">
<p id="copyone" hidden="hidden">https://www.tslang.cn/docs/release-notes/typescript-3.1.html</p>
<p id="copycopy">点击复制按钮,进行文本复制</p>
<input id="copytwo" type="text" style="margin-left: 10px;width: 200px;">
<input type="button" value="复制" id="copy">
</div>
</div>
复制代码
点击按钮复制
最新推荐文章于 2020-06-04 17:00:40 发布