Sexy Alert Box 1.2 mootools & jQuery

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!.

sexyalertbox12

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

6, 7, 8
3.0, 3.5
9.64, 10
3
4

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. :roll:

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.
desbest dice:

Can you please make a new version where people can put custom html in the alerts, such as a form. And then the form values can be returned in a callback function (callback means a response).

dhamaso dice:
function chekadatos(nombre){
    if(!nombre){
    Sexy.error('<h1>dhamasito dice: </h1><p>Introduzca su nombre, porfavor</p>');

<strong>    $('#name').focus();</strong>
    return false;
    }

alguien sabe como hacer eso despues de que se mande el alertbox?

si no me entendieron mi pregunta es:
¿Como mandar el foco a una caja de texto despues de mandar un mensaje de error con el SexyAlert?

si saben porfavor respondan para saber si se puede o no, no soy muy bueno programando XD.

Kevin dice:

I’e been using your sexy aler box and I really love it. Though it has one little flaw. At line 312 you have

$('#BoxPromptInput').val(properties.input);

which should be

$('#BoxPromptInput').val(input);

With that you can now really set the text for the input box at the prompt.

To make it really nice you could add this one line below

$('#BoxPromptInput').focus(function(){
	// Check for the change
	if(this.value == input){
		this.select();
	}
});
Johnboy dice:

Hi,
Is there a way to control the Sexy Alert Box so it automatically appears when a user lands on a page (rather then clicking on a link) as i want to display some important information that all users should see..?

Thanks
Johnboy

Ch sab dice:

hi,

i have integrated alerts into my project but i have lost the sliding of the alert because i have to use the compitibilty edition of jquery so that it wont conflit with javascript menus file

error came is

Error: o.easing[this.options.easing || (o.easing.swing ? "swing" : "linear")] is not a function
Source File: http://localhost/jquery.min.js
Line: 19

can u please help me out here

hans dice:

me podrian mostrar un ejemplo en php de como implementarlo porfavor.

ber dice:

se puede agrandar el ancho del popup? Muchas gracias!

Edgard dice:

Alguien me podría decir si este componente se puede usar en asp.net? lo he probado en simples paginas html y funciona correctamente pero cuando lo intento llamar desde un evento en asp de esta forma:

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
ScriptManager.RegisterStartupScript(Me, Me.GetType(), “EjecutarAbrirPopUp”, “Sexy.alert(’Hola’);”, True)

End Sub

Me sale un error que me dice que : ‘Sexy’ is undefined

gracias de antemano

Edgard dice:

Alguien me podría decir si este componente se puede usar en asp.net? lo he probado en simples paginas html y funciona correctamente pero cuando lo intento llamar desde un evento en asp de esta forma:

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
ScriptManager.RegisterStartupScript(Me, Me.GetType(), “EjecutarAbrirPopUp”, “Sexy.alert(’Hola’);”, True)

End Sub

Me sale un error que me dice que : ‘Sexy’ is undefined
gracias de antemano

Fer dice:

Gracias en primera medida, como veran mis conosimientos son pocos al respecto, mi inquietud es la siguiente, al descargar me gusta la forma como se personalizo esta alerta sexy, de echo quiero ponerla en mi web, seria posible poner esa modificacion la ocupa presisamente par q en mi web descarguen un ichero.
y la segunda inquietud es q si me alludan a hacerlo en una pagina limpia en html ose el index solo con la alerta sexy, y donde poner el link para q descarguen dicho archivo graciaas

sysmaya dice:

Al cargar un iframe dentro del sexy, pues no genera error, solo que asigan un estilo hidden al objeto iframe.

Sexy.alert(”");

al intentar forzar la visibilidad del iframe:
$(’iframe’).show();
tampoco lo ejecuta pero llamando a la propiedad OK++

$(”#abc”).css(’visibility’,'visible’);

Asi podemos cargar un iframe dentro del Sexy, y dentro podremos colocar todo un formulario con N campos.

La cuestion es como cerrar el Sexy desde dentro del iframe.

para eso uso parent. mmmm hasta ahi se por que el sexy no tiene una (o si??) funcion Sexy.close().

Pero se podria enviar el form interno del iframe con el click del boton Sexy y de paso se cierra.

sysmaya dice:

Para edgard, Claro que se puede usar sexy y todo el Jscript dentro de asp. Solo que debes escribir el codigo dentro de una etiqueta script y con el type jscript.

ASP usa por defecto VBscript y no debiera presentar problema usar ambos dentro de una pagina.

Pero es mejor aprender PHP.

Alex dice:

Sera posible mostrar el mensaje de error sin utilizar un enlace??
Necesito mostrar este error pero desde un echo en php

Gracias

Marcelo dice:

Sera posible mostrar el mensaje de error sin utilizar un enlace??
Necesito mostrar este error pero desde un echo en php! [2]

Gracias

Hi,

I found a bug into preloadImages function, the final url was comming with double quotes, and make the url invalid… so I added another replace to remove the double quotes from URL, if someone know a better way to fix this ;)

  preloadImages: function() {
    var img = new Array(2);
    img[0] = new Image();img[1] = new Image();img[2] = new Image();
    img[0].src = this.Box.getStyle('background-image').replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1").replace(new RegExp("["+'"'+"]","g") ,'');
    img[1].src = this.InBox.getStyle('background-image').replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1").replace(new RegExp("["+'"'+"]","g") ,'');
    img[2].src = this.Contenedor.getStyle('background-image').replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1").replace(new RegExp("["+'"'+"]","g") ,'');
  },
any dice:

hola a todos soy nueva programando y quiero insertar este sexyalert que esta buenisimo pero me sale error al ejecutar me pueden ayudar

gracias

pablo dice:

Como podría hacer para que se aparezca una vez se ha enviado un correo a través de un formulario?El botón es el de abajo y el formulario es form1.
Gracias

<label>
                           <input type="submit" name="submit" id="submit" value="Enviar solicitud" class="envio"/>
                         </label>
sam dice:

do u have any english version of this article?
thnaks

Toni dice:

Hola!
En el siguiente código:

$("#formulario").submit();
Sexy.info('Mensaje enviado correctamente', {onComplete: function(returnvalue) {if(returnvalue){$("input:text").attr("value","");} } })

¿Sabeis porqué el sexyalert no espera a que se pulse el botón de OK y se cierra automáticamente?
Si lo pruebo sin el envio del formulario funciona perfectamente, pero al hacer el submit primero, deja de funcionar…

Gracias!

Gerardo dice:

Disculpen necesito ayuda, quisiera saber si se puede mostrar una alerta pero sin utilizar un enlace o boton.
Es urgente. Gracias

Help dice:

Lo siento, no puedo hablar español. ¿Cómo puede hacer el pop alerta hasta onload y no con el uso de un vínculo?

Oyunlar dice:

Very very nice, thank you very much..

Carlos dice:

Al utilizar los alerts en un jsp el tamaño del fondo opaco (Overlay) aparece más pequeño que el tamaño (height) de la página. Alguna sugerencia?