Shefarol Soluções Web

Exemplo de Sweet Alert - Voltar

Padrão 1 Padrão 2 Pequeno Perguntas Confirm Login
Chame o CDN dentro da tag HEAD
<script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>
Javascript do Padrão 1
function SweetPadrao1(){
	// Janela padrão
	Swal.fire('Olá sou um Sweet Alert!') 
}
Javascript do Padrão 2
function SweetPadrao2(){
	// Janela padrão com ícone
	Swal.fire('OPA', 'Já tenho uma ícone!', 'success')
}
Javascript do Pequeno
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'
  		},
   	})
}
Javascript do Perguntas
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]);
  		}
	})
}
Javascript do Confirm
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>';
		}
	})
}
Javascript do Login
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}`
		}
	})
}

 

Para maiores informações visite: https://sweetalert2.github.io/