<script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>
function SweetPadrao1(){
// Janela padrão
Swal.fire('Olá sou um Sweet Alert!')
}
function SweetPadrao2(){
// Janela padrão com ícone
Swal.fire('OPA', 'Já tenho uma ícone!', 'success')
}
function SweetPequeno(){
//Janela personalizada
Swal.fire({
title: '<?php echo $_SESSION['message_title']; ?>',
text: '<?php echo $_SESSION['message']; ?>',
icon: '<?php echo $_SESSION['message_type']; ?>',
toast: true, //alert pequeno
showConfirmButton: false, //botão ok (true/false)
showCancelButton: false, //botão cancelar
cancelButtonText: 'Fechar', //Texto do botão cancelar
showCloseButton: false, //Mostra botão fechar e texto desce
//closeButtonHtml: '<i class="fas fa-times"></i>', //Permite alterar o ícone do botão fechar
position: 'center', //local do alert
//top, top-start, top-end,
//center, center-start, center-end
//bottom, bottom-start, bottom-end
timer: 3000,
timerProgressBar: true, //barra de progresso (true/false)
didOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
},
//footer: 'Texto do rodapé', //Influencia no tamanho da janela
//width: '500px', //Tamanho do alert
//padding: '20px', //Espaçamento interno do alert
showClass: { // Desativa a animação
//popup: 'swal2-noanimation',
//backdrop: 'swal2-noanimation'
},
})
}
function SweetPerguntas(){
//Exemplo com etapas e perguntas
Swal.mixin({
input: 'text',
confirmButtonText: 'Próxima <i class="fas fa-angle-right"></i>',
showCancelButton: true,
imageUrl: "imagem.png",
imageWidth: 100,
imageHeight: 100,
imageAlt: "Pergunta",
//background: 'gray',
progressSteps: ['1', '2', '3']
}).queue([
{
title: 'Pergunta 1',
text: 'O que significa HTML?'
},
{
title: 'Pergunta 2',
text: 'O que significa CSS?'
},
{
title: 'Pergunta 3',
text: 'O que significa Javascript?'
},
]).then((result) => {
if (result.value) {
Swal.fire({
title: 'Pronto!',
imageUrl: "ok.png",
imageWidth: 100,
imageHeight: 100,
imageAlt: "Ok",
//html:
// 'Suas respostas: <pre><code>' +
// JSON.stringify(result.value) +
// '</code></pre>',
confirmButtonText: 'Obrigado'
})
document.getElementById('resposta1').innerHTML =
'Resposta 1: ' +
JSON.stringify(result.value[0]);
document.getElementById('resposta2').innerHTML =
'Resposta 2: ' +
JSON.stringify(result.value[1]);
document.getElementById('resposta3').innerHTML =
'Resposta 3: ' +
JSON.stringify(result.value[2]);
}
})
}
function SweetConfirm(){
//Exemplo com Confirm
Swal.fire({
title: 'Confirma?',
text: "Você tem certeza que quer excluir?",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#f5365c',
confirmButtonText: '<i class="far fa-thumbs-up"></i> Sim, excluir!',
cancelButtonColor: '#888',
cancelButtonText: '<i class="far fa-thumbs-down"></i> Não'
}).then((result) => {
if (result.value) {
Swal.fire(
'Excluído!',
'Registro excluído com sucesso',
'success'
)
document.getElementById('exclusao').innerHTML =
'<span class="text-danger">Arquivo excluído com sucesso!</span>';
}else{
document.getElementById('exclusao').innerHTML =
'<span class="text-primary">O arquivo não foi excluído!</span>';
}
})
}
function SweetFormLogin(){
//Formulário de login
Swal.fire({
title: '<i class="fas fa-user-lock"></i> Faça seu login',
html: `<input type="text"
name="login"
id="login"
class="swal2-input"
placeholder="Usuário">
<input type="password"
name="senha"
id="senha"
class="swal2-input"
placeholder="Senha">`,
confirmButtonText: '<i class="fas fa-sign-in-alt"></i> Entrar',
focusConfirm: false,
preConfirm: () => {
const login = Swal.getPopup().querySelector('#login').value
const senha = Swal.getPopup().querySelector('#senha').value
if (!login || !senha) {
Swal.showValidationMessage(`Por favor, digite seu login e senha`)
}
return { login: login, senha: senha }
}
}).then((result) => {
if (result.value) {
Swal.fire(
`Login: ${result.value.login}
Senha: ${result.value.senha}`
)
document.getElementById('usu').innerHTML =
`Login: ${result.value.login}`
document.getElementById('pass').innerHTML =
`Senha: ${result.value.senha}`
}
})
}