jQuery - Alertify.js
Alertify.js es un complemento de jQuery para mostrar mensajes de alerta en diferentes formatos
Un simple ejemplo de alerta como se muestra a continuación:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>alertify.js - example page</title>
<link rel = "stylesheet" href = "alertify.core.css" />
<link rel = "stylesheet" href = "alertify.default.css" id = "toggleCSS" />
<meta name = "viewport" content = "width = device-width">
<style>
.alertify-log-custom {
background: blue;
}
</style>
</head>
<body>
<h2>Dialogs</h2>
<a href = "#" id = "alert">Alert Dialog</a><br>
<a href = "#" id = "confirm">Confirm Dialog</a><br>
<a href = "#" id = "prompt">Prompt Dialog</a><br>
<a href = "#" id = "labels">Custom Labels</a><br>
<a href = "#" id = "focus">Button Focus</a><br>
<a href = "#" id = "order">Button Order</a>
<h2>Ajax</h2>
<a href = "#" id = "ajax">Ajax - Multiple Dialog</a>
<h2>Logs</h2>
<a href = "#" id = "notification">Standard Log</a><br>
<a href = "#" id = "success">Success Log</a><br>
<a href = "#" id = "error">Error Log</a><br>
<a href = "#" id = "custom">Custom Log</a><br>
<a href = "#" id = "delay">Hide in 10 seconds</a><br>
<a href = "#" id = "forever">Persistent Log</a>
<h2>Themes</h2>
<a href = "#" id = "bootstrap">Bootstrap Theme</a>
<script src = "https://code.jquery.com/jquery-1.9.1.js">
</script>
<script src = "alertify.min.js"></script>
<script>
function reset () {
$("#toggleCSS").attr("href", "alertify.default.css");
alertify.set({
labels : {
ok : "OK",
cancel : "Cancel"
},
delay : 5000,
buttonReverse : false,
buttonFocus : "ok"
});
}
$("#alert").on( 'click', function () {
reset();
alertify.alert("This is an alert dialog");
return false;
});
$("#confirm").on( 'click', function () {
reset();
alertify.confirm("This is a confirm dialog", function (e) {
if (e) {
alertify.success("You've clicked OK");
} else {
alertify.error("You've clicked Cancel");
}
});
return false;
});
$("#prompt").on( 'click', function () {
reset();
alertify.prompt("This is a prompt dialog", function (e, str) {
if (e) {
alertify.success("You've clicked OK and typed: " + str);
} else {
alertify.error("You've clicked Cancel");
}
}, "Default Value");
return false;
});
$("#ajax").on("click", function () {
reset();
alertify.confirm("Confirm?", function (e) {
if (e) {
alertify.alert("Successful AJAX after OK");
} else {
alertify.alert("Successful AJAX after Cancel");
}
});
});
$("#notification").on( 'click', function () {
reset();
alertify.log("Standard log message");
return false;
});
$("#success").on( 'click', function () {
reset();
alertify.success("Success log message");
return false;
});
$("#error").on( 'click', function () {
reset();
alertify.error("Error log message");
return false;
});
$("#delay").on( 'click', function () {
reset();
alertify.set({ delay: 10000 });
alertify.log("Hiding in 10 seconds");
return false;
});
$("#forever").on( 'click', function () {
reset();
alertify.log("Will stay until clicked", "", 0);
return false;
});
$("#labels").on( 'click', function () {
reset();
alertify.set({ labels: { ok: "Accept", cancel: "Deny" } });
alertify.confirm("Confirm dialog with custom button labels", function (e) {
if (e) {
alertify.success("You've clicked OK");
} else {
alertify.error("You've clicked Cancel");
}
});
return false;
});
$("#focus").on( 'click', function () {
reset();
alertify.set({ buttonFocus: "cancel" });
alertify.confirm("Confirm dialog with cancel button focused", function (e) {
if (e) {
alertify.success("You've clicked OK");
} else {
alertify.error("You've clicked Cancel");
}
});
return false;
});
$("#order").on( 'click', function () {
reset();
alertify.set({ buttonReverse: true });
alertify.confirm("Confirm dialog with reversed button order", function (e) {
if (e) {
alertify.success("You've clicked OK");
} else {
alertify.error("You've clicked Cancel");
}
});
return false;
});
$("#custom").on( 'click', function () {
reset();
alertify.custom = alertify.extend("custom");
alertify.custom("I'm a custom log message");
return false;
});
$("#bootstrap").on( 'click', function () {
reset();
$("#toggleCSS").attr("href", ".alertify.bootstrap.css");
alertify.prompt("Prompt dialog with bootstrap theme", function (e) {
if (e) {
alertify.success("You've clicked OK");
} else {
alertify.error("You've clicked Cancel");
}
}, "Default Value");
return false;
});
</script>
</body>
</html>Esto debería producir el siguiente resultado: