0

boa tarde estou em busca de fazer um alert personalizado com o design diferente: por exemplo se o usuário clicar em cancelar abre um alert perguntando "deseja realmente cancelar" só que gostaria dele com um design alguem poderia me ajudar. eu tenho alert mas somente com 1 botão "ok" gostaria de saber como posso fazer para um confirm. Agradeço desde já"inserir a descrição da imagem aqui

2
  • Cara da para fazer isso só com CSS de forma simples, se quiser eu faço um exemplo pra vc.
    – hugocsl
    14/06/2018 às 14:37
  • Me ajudaria muito obrigado 14/06/2018 às 16:57

3 Respostas 3

3

Tem esta outra versão aqui também.

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>

4
  • Muito interressante, só que eu gostaria de um confirm por exemplo "Deseja excluir?" ai teria dois botões "sim" e "não" só que não sei como fazer 14/06/2018 às 17:00
  • Editei a resposta, mas, pelo visto vc não entrou na documentação pelo link que lhe passei. Seria bom vc entrar lá e dar uma olhada em cada exemplo e suas funcionalidades.
    – LeAndrade
    14/06/2018 às 17:50
  • 1
    Caraca, isso é bem legal, nunca tinha ouvido falar dessa api 14/06/2018 às 18:00
  • 1
    Leandro eu acabei de ver aqui me ajudou muito era exatamente o que precisava obrigado 14/06/2018 às 22:58
3

Como vc falou que uma resposta apenas com CSS poderia te atender, aqui vou deixar uma técnica. O princípio aqui é que o btn Fechar na verdade é um label linkado em um input:radio que quando checkadofaz a div que vem abaixo sumir.

Veja que eu coloquei um pequeno delay na entrada do modal, mas na animation vc pode controlar esse valor se quer que demore mais ou não. Repare tb que quando o modal está ativo vc não consegue selecionar nada que está abaixo, nem clicar em nada (isso pro usuário leigo).

Tentei deixar o modelo o mais simples possível para ficar mais fácil de entender. Deixei comentários no código.

Veja o exemplo.

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

Existe uma biblioteca bem interessante no link abaixo

aqui

E um exemplo abaixo:

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

0

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 .