Shefarol Soluções Web

Sweet Alert - Voltar

Padrão 1 Padrão 2 Pequeno Perguntas Confirm Login

Chame o CDN dentro do HEAD

						<script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>
					

Padrão 1

function SweetPadrao1(){
	// Janela padrão
	Swal.fire('Olá sou um Sweet Alert!') 
}

Padrão 2

function SweetPadrao2(){
	// Janela padrão com ícone
	Swal.fire('OPA', 'Já tenho uma ícone!', 'success')
}

Pequeno

						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'
						  		},
					      	})
					    }


Perguntas

						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: 
' +
						         		//	JSON.stringify(result.value) +
						        		//	'
', 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]); } }) }

Confirm

						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!';
					  			}
							})
						}

Login

						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}`
					  			}
							})
						}


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