How to make Confirm custom?

Asked

Viewed 1,608 times

0

good afternoon I am in search of making a custom Alert with different design: for example if the user click cancel open an Alert asking "really want to cancel" only that would like it with a design someone could help me. i have Alert but only with 1 button "ok" would like to know how I can do for a confirm. I thank you already"inserir a descrição da imagem aqui

javascript html css

  • Face to do this only with CSS in a simple way, if you want I make an example for you.

  • It would help me a lot thanks

3 answers

3


There’s this other version here also.

swal({
  title: 'Salvar',
  text: "Para salvar clique em Ok!",
  type: 'info',
  showCancelButton: true,
  confirmButtonColor: '#28B463',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Salvar',
  confirmButtonText: 'Salvar'
}).then((result) => {
  if (result.value) {
    swal(
      'Salvado!',
      'Seu arquivo foi salvo com sucesso.',
      'success'
    )
  }
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.22.2/sweetalert2.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.22.2/sweetalert2.min.js"></script>

  • Very interesting, only that I would like a confirm for example "Do you want to delete?" there would be two buttons "yes" and "no" only that I do not know how to do

  • I edited the answer, but apparently you did not enter the documentation by the link I gave you. It would be good if you went in there and took a look at each example and its functionalities.

  • 1

    Damn, that’s pretty cool, I’ve never heard of that api

  • 1

    Leandro I just saw here helped me a lot was exactly what I needed thanks

3

As you said that a response only with CSS could suit you, here I will leave a technique. The principle here is that the btn Close actually is a label linked in a input:radio that when checkadomakes the div downhill disappear.

See that I put a small delay in the entrance of the modal, but in the animation you can control this value whether you want it to take longer or not. Note also that when the modal is active you can not select anything below, nor click anything (This for the layman).

I tried to make the model as simple as possible to make it easier to understand. I left comments in the code.

Take the example.

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#rd {
  display: none;
}
input[id="rd"]:checked + div.bg {
  display: none;
  z-index: -1000;
  opacity: 0;
}
.bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  /* remover animação se quiser que ele aparece direto sem delay  */
  -webkit-animation: tempo 500ms ease-in 250ms forwards;
          animation: tempo 500ms ease-in 250ms forwards;
}
.box {
  background-color: red;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box label {
  background-color: #fff;
  width: 50px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  display: inline-block;
  cursor: pointer;
}
/* remover se remover a animação do modal  */
@-webkit-keyframes tempo {
  to {
    opacity: 1;
  }
}
@keyframes tempo {
  to {
    opacity: 1;
  }
}
<!-- modal -->
<input type="radio" id="rd">
<div class="bg">
  <div class="box">
    <label for="rd">fechar</label>
  </div>
</div>
  
<!-- conteudo de Exemplo -->
<table border="1">
  <tr>
    <td>100px</td>
    <td>200px</td>
  </tr>
</table>
<input type="submit">
<input type="text">

2

There is a very interesting library at the link below

here

And an example below:

<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.22.2/sweetalert2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.22.2/sweetalert2.min.js"></script>

<script>

</script>
<script type="text/javascript">
window.onload = function() {
swal("Parabéns!", "Você Clicou em Algo!", "success");
};

</script>
<head>
<body>
</body>
</html>

Browser other questions tagged javascript html css

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