<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: 'Logado', text: 'Bem-vindo, Fábio', icon: 'success', 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: '', //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 ', 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:', 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]); } }) }' + // JSON.stringify(result.value) + // '
function SweetConfirm(){ //Exemplo com Confirm Swal.fire({ title: 'Confirma?', text: "Você tem certeza que quer excluir?", icon: 'warning', showCancelButton: true, confirmButtonColor: '#f5365c', confirmButtonText: ' Sim, excluir!', cancelButtonColor: '#888', cancelButtonText: ' Não' }).then((result) => { if (result.value) { Swal.fire( 'Excluído!', 'Registro excluído com sucesso', 'success' ) document.getElementById('exclusao').innerHTML = 'Arquivo excluído com sucesso!'; }else{ document.getElementById('exclusao').innerHTML = 'O arquivo não foi excluído!'; } }) }
function SweetFormLogin(){ //Formulário de login Swal.fire({ title: ' Faça seu login', html: ` `, confirmButtonText: ' 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}` } }) }