Scribd
Upload
750 views2 pages

Sweet Alert

The document contains code for displaying different types of messages using the SweetAlert library. It includes 8 buttons that trigger SweetAlert popups with messages, warnings, errors, images, inputs, and ajax requests. The code initializes SweetAlert and attaches click handlers to each button to trigger the corresponding SweetAlert display.

Uploaded by

Alejandro Guzman Molina
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
750 views2 pages

Sweet Alert

The document contains code for displaying different types of messages using the SweetAlert library. It includes 8 buttons that trigger SweetAlert popups with messages, warnings, errors, images, inputs, and ajax requests. The code initializes SweetAlert and attaches click handlers to each button to trigger the corresponding SweetAlert display.

Uploaded by

Alejandro Guzman Molina
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Sweet Alerts</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-
scale=1.0, maximun-scale=1.0, minimun-scale=1.0">

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">


<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" href="dist/sweetalert.css">

<script src="dist/sweetalert.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

</head>
<body>

<button id="boton1">Mensaje1</button>
<button id="boton2">Mensaje2</button>
<button id="boton3">Mensaje3</button>
<button id="boton4">Mensaje4</button>
<button id="boton5">Mensaje5</button>
<button id="boton6">Mensaje6</button>
<button id="boton7">Mensaje7</button>
<button id="boton8">Mensaje8</button>

<script>
$(document).ready(function(){

$("#boton1").click(function(){
swal("¡Esto es un mensaje!");
});

$("#boton2").click(function(){
swal("¡Esto es un mensaje!", "Es lindo, verdad?");
});

$("#boton3").click(function(){
swal("Buen trabajo!", "Hiciste clic en el botón!", "success");
// success, error, warning. info
});

$("#boton4").click(function(){
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonClass: 'btn-danger',
confirmButtonText: 'Yes, delete it!',
closeOnConfirm: false,
//closeOnCancel: false
},
function(){
swal("Deleted!", "Your imaginary file has been deleted!", "success");
});
});

$("#boton5").click(function(){
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonClass: 'btn-danger',
confirmButtonText: 'Yes, delete it!',
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm){
if (isConfirm){
swal("Deleted!", "Your imaginary file has been deleted!", "success");
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
});

$("#boton6").click(function(){
swal({
title: "Sweet!",
text: "Here's a custom image.",
imageUrl: 'assets/thumbs-up.jpg'
});
});

$("#boton7").click(function(){
swal({
title: "An input!",
text: "Write something interesting:",
type: "input",
showCancelButton: true,
closeOnConfirm: false,
animation: "slide-from-top",
inputPlaceholder: "Write something"
},
function (inputValue) {
if (inputValue === false) return false;
if (inputValue === "") {
swal.showInputError("You need to write something!");
return false
}
swal("Nice!", "You wrote: " + inputValue, "success");
});
});

$("#boton8").click(function(){
swal({
title: "Ajax request example",
text: "Submit to run ajax request",
type: "info",
showCancelButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true
},
function () {
setTimeout(function () {
swal("Ajax request finished!");
}, 2000);
});
});

});
</script>

</body>
</html>

You might also like