Sexy Alert Box

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.
DeMoN says:

Antes que nada muy buena idea los sexi alerts.
Como hacer que despues de mostrar el sexi alert(SA) me redirija hacia la pagina anterior.
Lo he intentado con histori back pero el SA aparece y desaparece rapidisimo.
Existirá alguna manera de que solo despues de precionar el boton me redirija?
Gracias de antemano.
En breve voy a revisar las actualizaciones.
^DeMoN^

Healdler says:

Ami me funciona bien en windows,pero en linux me sale error.alguine sabe de esto

Gabo says:

Hola Amigos,
Antes q nada Eduardo esta genial tu sexy alert, estoy desarrollando una app en asp.net con c# y me esta costando trabajo mostrar tu alert desde c# normamlmente un alert se puede poner asi:

this.ClientScript.RegisterStartupScript(typeof(Page), "", "alert('Este código no existe');");

y funciona correctisimamente pero al hacer

//this.ClientScript.RegisterStartupScript(typeof(Page), "", "Sexy.error('Error al intentar entrar al sistemaYa le raaaaajaste la madre');");

Truena horrendamente y ya trate de hacer

this.ClientScript.RegisterStartupScript(typeof(Page), "", "window.addEvent('domready', function() {Sexy = new SexyAlertBox();Sexy.alert('<b>Gracias!</b> el correo fue enviado.');");

ojala alguien me pueda ayudar, gabosoft@gmail.com

Saludos…

Bahadir says:

Hi there,

I have this error on apache log.

[Wed Mar 04 10:30:27 2009] [error] [client 172.16.252.68] (20024)The given path is misformatted or contained invalid characters: Cannot map GET /yoursite/%22http://localhost/yoursite/images/SexyAlertBox/bg-box-body.gif%22 HTTP/1.1 to file, referer: http://localhost/yoursite/index.php?module=incque&amp;action=1&amp;id=2

How can I fix this?

Thank you!

Tiago says:

Hi,

How can I use Sexy alert with code? The page doesn´t load, only a blank space with the dimension of the frame.

Thank´s.

Tiago says:

Hi,

How can I use Sexy alert with iframe* code? The page doesn´t load, only a blank space with the dimension of the frame.

Thank´s.

nando4fun says:

¿yeah..funciona no blogger,estou certo?

Juan says:

Hola Primero felicitacion esta super el alertbox…. segundo tengo un problema que me esta matando la cabeza y no se que pasa….

lo bueno es que el alertbox me ejecuta y me funciona lo malo es que el background solo queda en una parte de la pantalla… por ejemplo… cuando lo abro aparece desde el tope del navegador hasta el fondo..(hasta ahora todo bien) pero cuando hago scroll hacia abajo el fondo se queda arriba.. y despues del fondo de la pantalla queda en blanco… porfa alguien que me pueda yudar con esto… les agradezco….

Juan says:

Listo ya descrubi cual fue el problema…. y seria bueno que hubiera manera de arreglarlo.. el problema radica cuando usas ajax en conjunto con el sexy AlertBox… ya que el background, me imagino, que su height se calcula con el tamano del la pagina de html.. y el ajax esta escondido y no aporta a el height del html… solo aporta cuando es llamado.. entonces cuando es llamado la porcion que ajax agrega al html no es cubierto por el background del sexyalert y queda en blanco….. seria bueno que se puediera arreglar este problema…. gracias y de nueo felicitaciones!!! esta muy chevere el sexyalert….

Eduardo says:

Hola Juan, gracias lo voy a investigar.

¿Este comentario te ha servido? y colabora con el blog
Reply

In order to override the standard alert() javascript function use this piece of code:

&lt;script type=&quot;text/javascript&quot;&gt;
    try {
      function MyAlert(text) {
	      Sexy.info(text);
	    }
    } catch(err) {
	    function MyAlert(text) {
	      alert(text);
	    }
    }
  &lt;/script&gt;
&lt;input type=&quot;button&quot; value=&quot;AlertMe&quot; onClick='javascript:MyAlert(&quot;Hello World!&quot;);'&gt;

this code works even if exists today a browser which doesn’t support css…

In order to override the standard alert() javascript function use this piece of code:

&lt;script type=&quot;text/javascript&quot;&gt;
    try {
      function MyAlert(text) {
	      Sexy.info(text);
	    }
    } catch(err) {
	    function MyAlert(text) {
	      alert(text);
	    }
    }
  &lt;/script&gt;
&lt;input type=&quot;button&quot; value=&quot;AlertMe&quot; onClick='javascript:MyAlert(&quot;Hello World!&quot;);'&gt;

this code works even if exists today a browser which doesn’t support css…

Jose Eduardo says:

Eduardo, felicicdades por tu aporte y conocimiento compartido. Una consulta, algun ejemplo para implementar en Vbasic.NET, tengo problemas.
- Primero quiero implemetar el Sexy Alert, en base al valor de una variable.
- Lo coloco en el head y al ingresa si funciona.
- Lo ejecuto desde el Response.Write (,la manera de llamar un Javascript desde Vbasic) y ejecuta, pero no muestra nada.
-Estoy usando Ajax con un scriptManager y un UpdatePanel.

Jose Eduardo says:

Este es mi codigo vbasic. por decir en el evento de un boton:
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
Response.Write(”sexy.alert(’hola’)”)
End Sub

En en html: el head tiene lo siguiente:

Página sin título

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

El probelmna es que me sale error.Las css, js estan bien indicadas en el head.
QUe puede ser?

Jose Eduardo says:

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
Response.Write(”Sexy.alert(’hola’)”)
End Sub

O no se implementa en Vbasic.Net?

Eduardo says:

@Jose:
1) Creo que estás mezclando html con javascript.
2) No manejo VB.net asi que puedo ayudarte sólo si orientas la pregunta hacia la web.
3) Arriba de este formulario de comentarios hay un cartel que dice ‘Para dudas y consultas técnicas, existe el Foro’ justamente porque estás posteando en un artículo de la versión vieja del Script que tiene un año de antigüedad.

Date una vuelta por el foro, trataremos de ayudarte en lo que podamos.

¿Este comentario te ha servido? y colabora con el blog
Reply
jepllach says:

hola, estimados colegas. me pase por aqui ya que me volvi un 8 haciendo una ventana de alert() personalizada. lo logre pero ese no es el punto. lo que pasaba era que seguia en funcionamiento el formulario en la parte trasera y no como un alert de javascript que si es una ventana modal. bueno solucione colocando un div transparamte o digamos algo transparente de manera que se viera el formulario pero que no se accediera a el. esto lo soluciono pero el div me ocupava solo el screen que se visualizaba y no si la parte del scroll que habia mas abajo. ejemplo: ejemplo: esta pag. si colocas el div al pricipio y que ocupe 100% solo ocupara la parte visualizada por el explorador y no la siguiente de haber en ella. ok me fue muy mal y me puse a buscar herramientas ya creadas en internet ya que siempre otro ya penso antes que tu. bueno los encontre a ustedes. y bueno me parecio my atractiva. y decidi montarla en mysite. a lo que la monto sin ningun problema es bastante facil montarla los felicito. a lo que voy a mi formulario que es + o – 4 pantallas de 800×600 hacia abajo. me encuentro que tambien solo cubre la oscuridad una parte de la pantalla y no toda. ahora hay algo que pueda hacer que estoy haciendo mal. gracias de ante mano

Wolfgang says:

Just love this… creating a nice helper class to easly add it to future .net projects… once its finished Ill let you know…

oscar says:

Hola, es posible utilizarlo para reemplazar el login que te tira apache cuando creas un htaccess??

gracias y muy buen trabajo!!

Calef says:

Hola felicitacion esta super el alertbox segundo tengo problema con el Sexy.prompt ,{password},
cuando es sin password el prompt devuelve un valor pero cuando se le pone en modo passwod no consigo que me devuelva el valor que ingrese me esta matando la cabeza

supernano says:

Holaa todos
Me gustaría que alguien me pudiera ayudar con un problema que tengo, estoy intentando crear un sexy alert muy sencillo, sólo necesito que tenga tres botones, por ejemplo Acceder (y que vincule a un documento html, por ejemplo: prueba.html), otro botón Cerrar ventana (que obviamente cierre este sexy alert) y por último otro botón Registrar que lleve a otro documento html.
No soy programador, y la verdad es que apenas entiendo el código, por eso no soy capaz de hacer lo que explico.
Por todo lo que leo en el foro creo que hacer esto es lo más simple que nadie ha pedido aquí, seguro que para todos vosotros no debe ser demasiado dificil pero a mi me salvareis la vida.
Gracias a todos de antemano y un saludo.

Hi,

When changes with a AJAX response I would like to fire a alert. What anm I doing wrong?

$(document).ready(function() {

$(”#MyResult”).change(function (){
Sexy.alert (’Hello world! “);
});

});

Tatto says:

Hola a todos, yo solo tengo tres semanas en esto de desarrollo web, mi duda es como se inplementa en HTML, por que no, he podido aser que salga la alerta, espero me ayuden, y felicitar a Eduarduardo, muy bueno tu aporte, espero algun dia yo poder aportar cosas casi buenas como estas… Grcaias de antemano, y a todos Saludes..

jesus says:

hola tengo un problema que cree el Sexy.alert bien, pero aparece y desaparece muy raido no dura ni 1 segundo, habra alguna forma de corregirlos? gracias

jdleon says:

Hola,

El sexy Alert funciona al 100 cuando se esta invocando una url directa ej, http://servidor/dirvirtual/hwelcome.aspx

sin embargo estoy utlizando un DNS para efectos de enmascarar la url convencional asi,

http://myaplicacion.empresa.com.mx

en este ultimo caso no funciona el sexyalert, marca error la pagina y no muestra ningun dato…

alguna sugerencia ?? el lenguaje es C#
gracias de antemano,