View this post in English

Sexy Alert Box es un clon “sexy” del clásico alert de javascript. Con un aire a lightbox, cambia las feas alertas de windows por alertas mas atractivas!.

Características de SexyAlertBox:

• 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 o superior
• Requiere: jQuery 1.3 o superior

Demostración

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

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.

Para usar mootools pega el siguiente código:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="sexyalertbox.v1.2.moo.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="sexyalertbox.css"/>

Para usar jQuery pega el siguiente código:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="sexyalertbox.v1.2.jquery.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="sexyalertbox.css"/>

¿Cómo se usa?

Usar SexyAlertBox es fácil:

Sexy.alert('Hello world!');

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

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

Recuerda que puedes poner código html en el mensaje del alerta.

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

Documentación

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=true’ 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

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.','Mi Nombre' , {
    onComplete:
      function(returnvalue) {
        alert (returnvalue);
      }
    });

  Sexy.confirm('¿Desea continuar?', {
    onComplete:
      function(returnvalue) {
        if (returnvalue) {
          alert ('presionaste OK');
        } else {
          alert('presionaste Cancelar');
        }
      }
    });

Licencia

El script es publicado bajo la licencia MIT.

¿Problemas? ¿Dudas?

Tranquilo! no saltes por la ventana [aún], puedes presentar todas tus dudas en el foro especialmente creado para Sexy Alert Box.

¿Cuanto cuesta?

Nada. Pero puedes colaborar con el blog haciendo una donación.

Download

Changelog

SexyAlertBox 1.2.2 - Mayo 25, 2009
* Updated for MooTools 1.2.2

SexyAlertBox 1.2.1 - Febrero 27, 2009
* Bug en jQuery, Selects no se ponían visibles

SexyAlertBox 1.2.0 - Febrero 09, 2009
* Dar foco a los botones
* Tecla ESC cierra el alerta
* Ocultar flash
* Reescrito desde 0 para jQuery

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.