1

Possuo um cupom de desconto para meu site, ao clicar no botão ele é copiado. Mas gostaria que após copiado mostrasse um pequeno balão em forma de pop-up dizendo "copiado".

Segue meu código:

        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 img{

    display: block;
    padding: 10%;
    margin-top: -70%;

}

.text-coupon {

    font-size: 1.3em;
    margin-top: -30%;
    color: white;
    margin-bottom: 20%;
    text-align: center;
    font-weight: bold;

}

.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;
}
<div class="banner-cupom">
<img src="{{media url="wysiwyg/Paginas/kitbody/cupom_1.png"}}" alt="" />
<div class="text-coupon"> <button onclick="copiarTexto()">10KITS239</button>
</div>
</div>

1
  • Olá JVEUZEBIO, consegui ajudá-lo com seu problema? 29/03/2019 às 17:47

2 Respostas 2

1

Como não deixou explicito como seria a exibição pop-up, vou lhe trazer algumas opções para atender sua proposta.

  1. A primeira e mais simples é alertar o usuário utilizando o comando alert(); do Javascript nativo, passando como parâmetro o texto 'Copiado', como mencionou.
  2. E o segundo seria utilizar a classe modal de alguma biblioteca(apenas para facilitar e agilizar o seu processo de implementação).
  3. Utilizar Javascript Nativo, juntamente com CSS para seu objetivo.

Exemplos:

1: Adicionar ao final de sua função copiarTexto o código alert('Copiado'); para exibir um pop-up onde o usuário terá que clicar no botão OK para fechá-lo.

2: Utilizando a Biblíoteca BootStrap(lembre-se de importar os scripts obrigatórios para o seu funcionamento), você pode realizar a exibição de seu pop-up utilizando a classe modal, segue exemplo:

<!DOCTYPE html>
<html lang="pt">
<head>
  <title>Modal com Bootstrap</title>
  <meta charset="utf-8">
  <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>
</head>
<body>


  <button type="button" data-toggle="modal" data-target="#myModal" onClick="fecharModal()">10KITS239</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body">
          <p align="center">Copiado.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" id="close" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

<script>
    function fecharModal(){
        setTimeout(function(){ document.getElementById("close").click(); }, 1000);
    }
</script>

</body>
</html>

Note que criei uma função fecharModal() que aguarda 1 segundo(parâmetro 1000 em milisegundos) para fechar o modal, aproximando com um pop-up genérico, uma vez que você não deixou claro como gostaria de exibí-lo.

3: E por último e um pouco mais trabalhoso ao meu ver, seria utilizando JavaScript nativo, para adaptar o pop-up de acordo com suas necessidades. Não vou trazer códigos, pois nesse caso, isso seria mais expecífico à sua necessidade, mas trago dois links que o ajudaria à solucionar, caso deseje utilizar essa opção. segue os links: utilizando modal + JS Nativo, tutorial utilizando Modal com CSS/JS.

1

É bem simples, você cria uma div que ficará escondida quando a página é carregada:

<div class='meu-css' id='div1' hidden></div>
<!-- o atributo hidden esconde a div -->

No script:

let copiarTexto = () => {
...

document.getElementById("div1").innerHTML = " Seu cupom é: "+texto+". "; 
//carrega um valor dentro da div, e esse texto é a variavel com o valor
document.getElementById("div1").style.display = "block"; 
// faz a div aparecer
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .