Apprise: Ventanas de alerta con jQuery

Apprise es un plugin de jQuery que permite crear ventanas de alerta sencillas o un poco más complejas donde es posible interactuar con los usuarios.

Siempre se empieza igual, debemos tener la librería agregada antes de </head> y lo lógico es cargarla directametne desde las API de Google:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'/>

Luego, debemos poner el plugin que viene en dos versiones, una normal y otra minimizada; cualquiera de ellas, la agregamos directamente:

<script type='text/javascript'>
//<![CDATA[
  ....... aquí pegamos el contenido del archivo apprise-1.5.full.js o apprise-1.5.min.js
//]]>
</script>

Y un poco de CSS que también podemos descargar en dos versiones, una minimizada y otra full; yo recomendaría esta última si es que queremos modificarlo un poco ya que son unas pocas líneas:

<style>
  .appriseOverlay {} /* es el fondo de toda la pantalla */
  .appriseOuter {} /* es el rectángulo contenedor */
  .appriseInner {} /* es el rectángulo interior con el contenido a ser mostrado */
  /* los botones y los DIVs donde se muestran */
  .appriseInner button {} 
  .appriseInner button:hover {}
  .aButtons,.aInput {}  
  .aTextbox {}
</style>

A partir de acá, podemos usarlo de distintos modos; lo más simple es un enlace:

<a href="#" onclick="apprise('texto a mostrar');"> click </a>

El resto de las alternativas, funciona de modo semejante a como lo hacen las ventanas de alerta normales:

apprise('TEXTO', {'confirm':true});
apprise('TEXTO', {'verify':true});
apprise('TEXTO', {'input':true});

Si usamos alguna de las variantes que nos permiten interactuar, debemos usar JavaScript para leer el resultado y actuar en consecuencia.

Por ejemplo, con algo así, podemos consultar a los usuarios si quieren cambiar un color por otro:

<a href="#" onclick="preguntar();"> click </a>

y usaríamos una función:

<script>
function preguntar() {
  apprise('¿Color rojo?', {'verify':true}, function(r) {
    if(r) {
      document.getElementById("colores").style.backgroundColor='#F00';
    } else {
      document.getElementById("colores").style.backgroundColor='#FF0';
    }
  });
}
</script>

Haciendo click en ese enlace, haría que un determinado elemento cuyo ID sea colores, tuviera un color rojo o amarillo de acuerdo a cuál sea la respuesta: