How to Shoot Pop Up after Copying Text

Asked

Viewed 90 times

1

I have a discount coupon for my website, when clicking on the button it is copied. But I would like after copied to show a small balloon shaped pop-up saying "copied".

Follows my code:

        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>

javascript css popup

  • Hello JVEUZEBIO, I managed to help you with your problem?

2 answers

1

It’s quite simple, you create a div that will be hidden when the page loads:

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

In the 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
}

1


As he did not make explicit how the exhibition would be pop-up, I’ll bring you some options to suit your proposal.

  1. The first and simplest is to alert the user using the command alert(); of Javascript native, passing as parameter the text 'Copiado', as you mentioned.
  2. And the second would be to use the class modal some library (just to facilitate and expedite your implementation process).
  3. Use Native Javascript, along with CSS for your goal.

Examples:

1: Add to the end of your function copiarTexto the code alert('Copiado'); to display a pop-up where the user will have to click the OK button to close it.

2: Using the Bootstrap Library(remember to import the required scripts for their operation), you can perform the display of your pop-up using the class modal, following example:

<!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 that I created a function fecharModal() waiting 1 second(parameter 1000 in milliseconds) to close the modal, approaching with a pop-up generic, since you have not made it clear how would like to display it.

3: And lastly and a little more laborious in my view, would be using Javascript native, to adapt the pop-up according to your needs. I will not bring any codes, because in this case, this would be more specific to your need, but I bring two links that would help you solve, if you want to use this option. follows the links: using Native modal + JS, tutorial using Modal with CSS/JS.

Browser other questions tagged javascript css popup

You are not signed in. Login or sign up in order to post.