Note: This post is deprecated. A new version of this script is here.

Nota: Este post está obsoleto. La nueva versión del script se encuentra aquí.

Sexy Alert Box es un clon “sexy” del clásico alert de javascript. Está basado en PBBAcpBox — un script que lamentablemente el autor paró de desarrollar — sin embargo, el código fue publicado bajo una licencia libre, con lo cual pude mejorarlo y adaptarlo a la versión 1.2 de Mootools.

Entre las características de SexyAlertBox encontramos:

• Estilo: Mostrar mensajes de error de una manera más bonita.
• Compatibilidad: Funciona tanto en navegadores modernos, como en Internet Explorer.
• Requiere: Mootools 1.2

Demostración

Puedes ver la demostración del script en el siguiente enlace: Ver demo.

Note: This post is deprecated. A new version of this script is here.

Nota: Este post está obsoleto. La nueva versión del script se encuentra aquí.

Instalación

Sube todos los archivos de SexyAlertBox a tu servidor. Las imágenes, el CSS y el Javascript. Si ubicas la carpeta imágenes en un directorio diferente, no olvides cambiar las rutas que están dentro del archivo CSS.

Descarga mootools con domready, e incluye los archivos Javascript en el header de tu página.

<script src="mootools.js" type="text/javascript"></script>
<script src="sexyalertbox.v1.js" type="text/javascript"></script>

Finalmente, agrega sexyalertbox.css en el header:

<link rel="stylesheet" href="sexyalertbox.css" type="text/css" media="all" />

¿Cómo se usa?

Primero debemos crear la clase, en el evento domready:

window.addEvent('domready', function() {
    var Sexy = new SexyAlertBox();
});

Usar SexyAlertBox es fácil:

Sexy.alert('Hello world!');

Para crear un alert más personalizado, puedes usar el segundo parámetro:

Sexy.alert('Hello world!', {
  textBoxBtnOk: 'Quiero Salir'
});

Lee la documentación para ver todas las opciones disponibles.

Documentación

Las siguientes opciones están disponibles para la creación de la clase:

• OverlayStyles

  Estilo CSS para el background.

  var Sexy = new SexyAlertBox({
    OverlayStyles:{
      'background-color': '#000',
      'opacity': 0.7
    }
  });

• showDuration

  Duración (en ms) de la transición del background.

  var Sexy = new SexyAlertBox({
    showDuration:200
    }
  });

• closeDuration

  Duración (en ms) de la animación al cerrar el alerta.

• moveDuration

  Duración (en ms) de la animación al mostrar el alerta.

Funciones públicas:

• alert

  @param string msg
  @param array propiedades

  Muestra un alerta con el icono de alerta.

• info

  @param string msg
  @param array propiedades

  Muestra un alerta con el icono de información.

• confirm

  @param string msg
  @param array propiedades

  Muestra un alerta con el icono de pregunta con dos botones, OK y Cancelar. El evento onComplete devuelve verdadero(true) si el botón OK fue presionado, o falso(false) si se pulsa Cancelar.

• prompt

  @param string msg
  @param string default
  @param array propiedades

  Muestra un alerta con una caja de texto en la que el usuario puede introducir contenido. También muestra dos botones, OK y Cancelar.

  El segundo parámetro es el valor predeterminado para la caja de texto, que el usuario podrá modificar.

  El evento onComplete devuelve el valor ingresado si el botón OK fue presionado, o falso(false) si se pulsa Cancelar. Adicionalmente puedes establecer la propiedad ‘password’ a verdadero si quieres mostrar un campo con asteriscos. Ejemplo:

  Sexy.prompt('Ingresa tu contraseña para poder identificarte en el sistema.','valor predeterminado' ,{password: true}); 

Eventos

Nota: Estos eventos solo están disponibles en la creación de la clase, como eventos generales.

• onShowStart

  Función a ejecutar cuando el alerta comienza a mostrarse.

  var Sexy = new SexyAlertBox({
    onShowStart:
      function(){
        //code here
      }
    }
  });

• onCloseStart

  Función a ejecutar cuando el alerta comienza a cerrarse.

• onShowComplete

  Función a ejecutar cuando el alerta se ha mostrado.

  var Sexy = new SexyAlertBox({
    onShowComplete:
      function(returnvalue){
        //alert(returnvalue);
      }
    }
  });

• onCloseComplete

  Función a ejecutar cuando el alerta se ha cerrado.

Evento para las funciones alert, confirm, prompt, info, error:

• onComplete

  Evento lanzado cuando el usuario presiona cualquier botón del alerta. Retorna el valor del boton presionado: falso en caso de que haya pulsado Cancelar.

  Sexy.prompt('Ingresa tu nombre.','' , {
    onComplete:
      function(returnvalue) {
        //alert (returnvalue);
      }
    });

Licencia

El script es publicado bajo la licencia MIT.

Descargar

Descarga SexyAlertBox.zip (SexyAlertBox.js + mootools + ejemplos)
Descarga SexyAlertBox.packed.js (versión comprimida)

¿Problemas? ¿Dudas?

Tranquilo! no saltes por la ventana [aún], puedes presentar todas tus dudas en el Foro AlertBox

Changelog

SexyAlertBox 1.1.0 - Septiembre 08, 2008
* Pre-Cargar imágenes del Skin, antes de mostrar el alerta
* Ocultar Selects, y elementos flash en IE6

SexyAlertBox 1.0.0 - Agosto 12, 2008
* 100% Compatible con Mootools 1.2.
* Chain Implemented (Cola de mensajes).
* Agregado mas estilos y soporte para prompt con contraseña.
* Arreglada la ejecución de eventos.