How to make custom confirm alert?

Question

How to make custom confirm alert?

Navigation

#1 by (3 votes)
#2 by (3 votes)
#3 by (1 votes)

0

Good afternoon I'm looking to make a custom alert with a different design: for example if the user clicks on cancel opens an alert asking "do you really want to cancel" but would like it with a design someone could help me. I have alert but only with 1 "ok" button I would like to know how can I make a confirm. Thanks in advance " < a>

javascript html css

asked by anonymous 14.06.2018 / 16:12

3 answers

3

As you said that a CSS-only answer could answer you, here I will leave a technique. The principle here is that btn Close is actually a label linked in a input:radio that when checkado does the div that comes down go away .

Notice that I put a small delay on the modal input, but on animation you can control this value whether it takes longer or not. Notice that when the modal is active you can not select anything that is below, or click anything (this is for the lay user).

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

See 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">

14.06.2018 / 19:58

1

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><scripttype="text/javascript">
window.onload = function() {
swal("Parabéns!", "Você Clicou em Algo!", "success");
};

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

14.06.2018 / 16:15

Python calling super () on a class that does not implement inheritance How to have two counters on the same repeat loop?

score 3 · Accepted Answer

There's another here version too.

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><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.22.2/sweetalert2.min.js"></script>