<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<meta name="format-detection"content="telephone=no">
<title>复制粘贴插件clipboard.js小例子</title>
<style>
body{width: 100%;}
.wrap{position: absolute;z-index: 10;display: none;}
.inner{position: relative;width: 100%;height: 100%;}
#copyinfo{position: absolute;width: 180px;height:50px;padding: 30px;top:30%;left:50%;margin-left:-120px;text-align:center;color: #fff;font-size: 12px; background-color: rgba(0,0,0,0.8);border-radius: 10px;}
.btn{position: absolute;width:200px;height: 40px;line-height: 40px; margin:100px auto 0;left:50%;margin-left:-100px;color:#fff;background-color: #3BCDCB;border-radius: 10px;border: none;}
</style>
</head>
<body>
<button class="btn" data-clipboard-text="https://www.h5-share.com/">点击复制H5案例分享官网链接</button>
<div class="wrap">
<div class="inner">
<div id="copyinfo"></div>
</div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/clipboard.min.js"></script>
<script>
var _w=document.body.clientWidth || document.documentElement.clientWidth;
var _h=document.body.clientHeight || document.documentElement.clientHeight;
$('.wrap').css({'width':_w+'px','height':_h+'px'});
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
$('.wrap').show();
console.log('H5案例分享官网链接 '+e.text+' 已成功复制到剪切板');
$('#copyinfo').html('H5案例分享官网链接<br />'+e.text+'<br />已成功复制到剪切板');
});
clipboard.on('error', function(e) {
console.log(e);
});
$('.wrap').on('click',function(){
$('.wrap').hide();
$('#copyinfo').html('');
});
</script>
</body>
</html>
1251
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
