Codebox com Função Copiar
<script>
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
</script>
<style>
#codebox{
background-color: #fff;
background-image: -webkit-linear-gradient(rgba(249, 131, 131, 0.05) 50%, transparent 50%, transparent);
background-image: -moz-linear-gradient(rgba(249, 131, 131, 0.05) 50%, transparent 50%, transparent);
background-image: -ms-linear-gradient(rgba(249, 131, 131, 0.05) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(rgba(249, 131, 131, 0.05) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(249, 131, 131, 0.05) 50%, transparent 50%, transparent);
-webkit-background-size: 100% 38px;
-moz-background-size: 100% 38px;
background-size: 100% 38px;
line-height: 20px;
height: 200px;
color: #ffc3c3;
position: relative;
padding: 0 5px;
margin: 5px 0 10px;
overflow: hidden;
word-wrap: normal;
white-space: pre;
font-size: 16px;
}
copia
{
border-radius:8px;
padding:10px;
font-size:14px;
font-family: 'delius', sans-serif;
height:50px;
cursor:pointer;
background:#fff5f5;
color: #f9c;
}
copia:hover{background: pink; color:white;}
/*tooltip*/
[data-wenk]:after {
position: absolute;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
display: none;
font-size: 12px;
font-family: 'Delius', cursive;
border-radius: 10px;
content: attr(data-wenk);
padding: 8px;
color: #f9c;
width: 150px;
line-height: 20px;
text-align: center;
z-index: 1;
pointer-events: none;
display: block;
opacity: 0;
visibility: hidden;
-webkit-transition: all .3s;
transition: all .3s;
bottom: 100%;
left: 50%;
-webkit-transform: translate(-50%, 10px);
transform: translate(-50%, 10px)
}
[data-wenk]:after {
opacity: 0
}
[data-wenk]:hover {
overflow: visible
}
[data-wenk]:hover:after {
display: block;
opacity: 1;
visibility: visible;
-webkit-transform: translate(-50%, -10px);
transform: translate(-50%, -10px)
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<center>
<copia onclick="copyToClipboard('#p1')"> <span data-wenk="Clique em copiar depois cole em algum lugar">Copiaaa!</span></copia>
</center>
<div id="codebox">
<p id="p1">o que vai ser copiado</p>
</div>
Comentários
Postar um comentário