Ejemplo del Plugin Alertify

Alertify es pequeña librería para la presentación de hermosas ventanas y notificaciones de diálogo. Es fácil de personalizar con CSS, posee una API sencilla y no depende de librerías de terceros (pero se adapta muy bien a ellos).

by Dominando jQuery

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/alertify.js/0.3.11/alertify.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/alertify.js/0.3.11/themes/alertify.core.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/alertify.js/0.3.11/themes/alertify.default.css">
<h2>Ejemplo del Plugin Alertify.js</h2>
<h3>Diálogo Básico</h3>
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" href="#" id="alerta">
    <span class="ui-button-text">Alerta</span>
</button>
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" href="#" id="confirmacion">
    <span class="ui-button-text">Confirmación</span>
</button>
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" href="#" id="prompt">
    <span class="ui-button-text">Entrada de texto</span>
</button>
<h3>Mensaje de Notificaciones</h3>
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" href="#" id="normal">
    <span class="ui-button-text">Normal</span>
</button>
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" href="#" id="correcta">
    <span class="ui-button-text">Correcta</span>
</button>
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" href="#" id="error">
    <span class="ui-button-text">Error</span>
</button>

JavaScript

$(document).ready(function(){
	// ==============================
    // Adaptar al español
    // por defecto: OK, Cancel
    alertify.set({ labels: {
        ok     : "Aceptar",
        cancel : "Cancelar"
    } });
    // ==============================
    // Para nosotros es más natural primero aceptar y luego cancelar
    // por defecto: Cancel, OK
    alertify.set({ buttonReverse: true });
    // ==============================
	// Diálogo Básico
    $("#alerta").click(function() {
        alertify.alert("Se trata de un diálogo de alerta");
    });
	
	$("#confirmacion").click(function() {
		alertify.confirm("Se trata de un diálogo de confirmación",
            function (e) {
			    if (e) {
				    alertify.success("Has pulsado <strong>"
                             + alertify.labels.ok 
                             + "</strong>");
			    } else {
				    alertify.error("Has pulsado <strong>"
                             + alertify.labels.cancel
                             + "</strong>");
			    }
		});
	});
	
	$("#prompt").click(function() {
		alertify.prompt("Se trata de un diálogo con entrada de texto",
            function (e, str) {
			    if (e) {
				    alertify.success("Has pulsado <strong>"
                             + alertify.labels.ok 
                             + "</strong> y escrito: " 
                             + str);
			    } else {
				    alertify.error("Has pulsado <strong>"
                             + alertify.labels.cancel 
                             + "</strong>");
			    }
		    }, "Valor predeterminado");
	});

	// Ejemplo de mensajes de Notificaciones
    // Notificación Normal
    $("#normal").click(function() {
        alertify.log("Esto es una notificación cualquiera.");
    });
	// Notificación Exitosa
    $("#correcta").click(function() {
        alertify.success("Ha ocurrido éxitosamente el proceso.");
    });
    // Notificación de Error
    $("#error").click(function() {
        alertify.error("Ha ocurrido un...