Tenho uma página, que disponibiliza um cupom. Ah uma imagem informando que deve ser clicado, e ao clicar era para o mesmo copiar o texto informado no codigo. Porém depois que adicionei o pop-up, não esta mais copiando. Alguém sabe o que pode ser?
let copiarTexto = () => {
//O texto que será copiado
const texto = "10KITS239";
//Cria um elemento input (pode ser um textarea)
let inputTest = document.createElement("input");
inputTest.value = texto;
//Anexa o elemento ao body
document.body.appendChild(inputTest);
//seleciona todo o texto do elemento
inputTest.select();
//executa o comando copy
//aqui é feito o ato de copiar para a area de trabalho com base na seleção
document.execCommand('copy');
//remove o elemento
document.body.removeChild(inputTest);
}
};
.banner-cupom {
text-align: center;
}
.banner-cupom img{
max-width: 400px;
}
.text-coupon {
font-size: 1.3em;
margin-top: -110px;
color: white;
text-align: center;
font-weight: bold;
margin-bottom: 50px;
}
.button, button {
display: -webkit-inline-box;
color: #fff;
border: 1px solid #72dafb;
border-radius: 10px;
margin-bottom: 10px;
text-align: center;
outline: 0;
background: #72dafb;
font-weight: bold;
padding-left: 2em;
padding-right: 2em;
}
.button:hover, button:hover {
cursor: pointer;
color: #fff;
background-color: #f6bc70;
border-color: #f6bc70;
text-decoration: none;
}
.modal-content {
border-radius: 15px;
width: 30px;
height: 60px;
position: relative;
top: 420px;
left: 290px;
}
.modal-body {
background: #000;
border-radius: 15px;
width: 80px;
height: 10px;
position: relative;
}
.modal-body:after {
content: "";
width: 0;
height: 0;
position: absolute;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #000;
bottom: -20px;
left: 20%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="all.js"></script>
<div class="banner-cupom">
<img src="{{media url="wysiwyg/Paginas/kitbody/cupom_2.png"}}" alt="" />
<div class="text-coupon"><button onclick="funcao()" onclick="copiarTexto()" data-toggle="modal" data-target="#myModal">10KITS239</button>
</div>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body" id="close">
<p align="center">Copiado.</p>
</div>
</div>
</div>
</div>
funcao()
?};
sobrando após a funçãocopiarTexto
.