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.

Hi Eduardo,

Can you help me please. I want to put sex.confirm on the below script but I can’t figer out how. I have managed to get sexy.confirm into the script but I cannot get the cancel button to work.

Thank you.

$(document).ready(function(){
  $('.calendarLink').live("click", (function(ev) {
    Sexy.confirm('Confirm your slectionThis automatically sends email.');
    var prefix = 'date_';
    var date = this.id.substring( ( prefix.length ) ); 

    $.ajax({
      type: "POST",
      url: "Sitefiles-N/jquery.formwizard-0.9.8/QuoteProcessor3.asp",
      data: "date="+date,
      success: function(msg){
        $('#result').html(msg);
      }
    });
  }));
});
    Eduardo dice:

    Hi, I think you need something like this:

    $(document).ready(function(){
      $('.calendarLink').live("click", (function(ev) {
        Sexy.confirm('Confirm your slection<em>This automatically sends email.</em>', {
          onComplete: function(returnvalue) {
    
            if (returnvalue) {
              var prefix = 'date_';
              var date = this.id.substring( ( prefix.length ) ); 
    
              $.ajax({
                type: "POST",
                url: "Sitefiles-N/jquery.formwizard-0.9.8/QuoteProcessor3.asp",
                data: "date="+date,
                success: function(msg) {
                  $('#result').html(msg);
                }
              }); //ajax
            } else {
              // user click cancel
            }
        }}); //sexy confirm
      })); //click
    }); //ready
    
    ¿Este comentario te ha servido? y colabora con el blog
    Responder

      Dear Eduardo,

      Thank you for taking the trouble to help me with this issue.

      Nearly done it! The cancel button works fine.

      The accept button errors; when clicking “OK” I get the following error message – “this.ID” is Null or not an object.

      Can you suggest an alternative?

      Kind regards

      Jonathan

        Eduardo dice:

        How lazy are you? ;)

        $(document).ready(function(){
          $('.calendarLink').live("click", (function(ev) {
            self = this;
            Sexy.confirm('Confirm your slection<em>This automatically sends email.</em>', {
              onComplete: function(returnvalue) {
        
                if (returnvalue) {
                  var prefix = 'date_';
                  var date = self.id.substring( ( prefix.length ) ); 
        
                  $.ajax({
                    type: "POST",
                    url: "Sitefiles-N/jquery.formwizard-0.9.8/QuoteProcessor3.asp",
                    data: "date="+date,
                    success: function(msg) {
                      $('#result').html(msg);
                    }
                  }); //ajax
                } else {
                  // user click cancel
                }
            }}); //sexy confirm
          })); //click
        }); //ready
        
        ¿Este comentario te ha servido? y colabora con el blog
        Responder
Guillermo dice:

Eduardo
Me podrías confirmar si el sexy.comfirm se puede asociar a un botón asp en una página aspx.
Disculpa la insistencia, pero llevo varios días cambiando el código y no logro hacerlo andar.
Gracias

Anthony dice:

Hello Eduardo

I am using the Gallery feature of Sexy Lightbox.

When one image changes to the next, the background of the picture frame is empty, so the main calling page is visible in the lightbox frame. Is it possible to have a background that would hide the calling page (only within the frame) during the picture transition? In my case, I would like it to be white to match the lightbox frame.

I hope that makes sense. You can see an example here:-

http://www.harrows-darts.com/flights.shtml

Regards

Anthony Pringle

manu dice:

Hola eduardo, antes que nada felicitarte por tu gran ayuda, esta muy bien tu alert, ahora bien quiero saber como implementar tu sexyalert en un botton submit, a la hora de guardar datos.

    leo dice:

    Que buena libreria., pero tengo la misma pregunta que manu,he tenido problemas para usarlo en un confirm con un submit, antes de enviar el formulario.
    En este segmento de codigo:
    Sexy.confirm(’¿Desea continuar?’, {
    onComplete:
    function(returnvalue) {
    if (returnvalue) {
    alert (’presionaste OK’);
    } else {
    alert(’presionaste Cancelar’);
    }
    }
    });
    la variable returnvalue, es una variable local, y no permite ser retornada.
    Alguien sabe como implementar esto en un submit, con un confirm.
    gracias.

Matt dice:
this.Content.setProperty('class','BoxPrompt');

          if ($type(message) == 'string')
            this.Content.set('html', message + '<br />');
          else
            this.Content.adopt(message);

This will detect is the message content is a collection of Elements or html string. I suggest this patch for all occurances of

this.Content.set('html', message + '<br />');
Syrakooz dice:

Hola, exelente libreria, felicitaciones amigo.

una consulta, es posible hacer el login con dos parametros de entrada, usuario y contraseña??

agradecido por tu respuesta

Andrés

Leo dice:

Hi Eduardo! Congratulations, the code is very good! I have a problem to use the “sexy code” with IE 8, in firefox works ok. I´m have doing this code:

Erro!

window.onload=function() {
Sexy.error(’Erro ao acessar o sistemaUsuário e/ou senha inválido(s)!Tente novamente.’, {
onComplete:
function(returnvalue) {
if (returnvalue) {
window.location = ‘index.php’;
}
}
});
};

Thanks.

Leo dice:

The completely code:

Erro!

window.onload=function() {
Sexy.error(’Erro ao acessar o sistemaUsuário e/ou senha inválido(s)!Tente novamente.’, {
onComplete:
function(returnvalue) {
if (returnvalue) {
window.location = ‘index.php’;
}
}
});
};

Works ok with FireFix… but in the IE 8… :-(
Thanks.

Tharindu dice:

Thanks a lot for sharing this cool feature… I want to make it show a info alert box when page first loads , I tried html “onload” attribute but it didn’t work can you help me with this ….. :)

regards
Tharindu

Daniel dice:

adapte un poco el codigo para un cofirm bastante geniales estos alerts, aver si al alguien le sirve.

Sexy.confirm(’¿Realmente deseas eliminar al usuario?’, { onComplete: function(returnvalue) { if (returnvalue) { location.href=’eliminar_usuario.php?id=1′; } } });

Hola, Estoy teniendo este problema:

useless setTimeout call (missing quotes around argument?)
[Break on this error] setTimeout(func,time);

jQuery.fn.delay = function(time,func){
55 return this.each(function(){
56 setTimeout(func,time);
57 });
58};

Alguna idea?

alan dice:

Sabes si todas estas aplicaciones ( sexy ligthbox,tool y alert box pueden ser llamadas desde un flash en especial sexy ligth box como lo hace el modal de ligthwindow the sticklabs?

carlos dice:

gracias excelente me podrias echar una mano para implementar la libreria en jsf me marca error al colocar el codigo de ejemplo en el evento onclick

Harold Lazo dice:

Hola Eduardo, primero que todo felicitarte por tan exelente trabajo se nota que le han quemado bastantes neuronas. :)

Quisiera que me ayudaras por favor, estoy intentanto combinar el SAB con el SLB, como: rengo un formulario de ingreso que al no encontrar al usuario manda un mensaje de alerta con SAB, este tiene en el mensaje un link con un correo … href=mailto:GGGG@.com tu sabes… como hago para que al dar click en ese link se cierre el SAB y aparezca el formulario de contacto con el SLB. el form de contacto ya está hecho y funciona con el SLB.

Gracias mi hermano por la ayuda que me brindes.

zilveer dice:

Hi,
first of all thanks for a great script.
I have a question, is it possible to have many input fields for typing?
Because I can only have 1 input field when I use Sexy.prompt.
How can I fix that?

Pezonudo dice:

Que mal que foros, tan maravillosos como este, con herramientas tan increibles siendo de personas HispanoHablantes sean tan malinchistas y quieran cambiar el lenguaje de sus articulos, he notado que usas, mucho el ingles aqui y como critica constructiva, ya tenemos demasiados problemas con tantos blogs y paginas que estan en ingles como para que haya otro como este, que a mi punto de vista es de los mejores, y que siendo español, quiera convertirse a ingles :S veo desde un hello world hasta una licensia descrita en ingles :s ojala, no se inclinen mas, por que si no sera, otro blog que no visitare mas, mi arduo trabajo, me impide aprender ingles, y ademas de esto, faltan mas blogs en español, para que usuarios iniciados como yo, podamos encontrar informacion e inspiracion para crecer, un saludo.

zilveer dice:

hi,
first of all thx for a great script.
i would like to know how it is possible to implement a total of x input fields in the prompt function? for the moment it is only possible to have 1 input field when requesting Sexy.promp

Thx zilveer

Stefko dice:

Is there a way to change the buttons to other than OK & Cancel for only one confirm action, leaving the default unchanged for the other confirm boxes with my page. Basically to change the button text on the fly from within the call to Sexy.confirm ??

Stefko dice:

¿Hay una manera de cambiar los botones para que no sea en Aceptar y Cancelar para un solo confirmar la acción, dejando inalterado el valor por defecto para las otras cajas de confirmar con mi página. Básicamente, para cambiar el texto del botón sobre la marcha desde dentro de la llamada a la Sexy.confirm?

Maxi dice:

Hola, hay alguna posibilidad de cerrar la sexyalert de forma externa al plugin?. Es decir crear algun metodo dentro del js, que poniendo Sexy.Close se cierre. Existe esto?

Maxi
Saludos.

Ignacio dice:

Hola Eduardo.
Lo primero agradecerte el trabajo y que lo compartas con nosotros, te prometo un café, si no puede ser en persona, será por paypal.

Quiero poner en mi sitio una ventana de alerta pero me gustaría incluir una imagen y adaptar las dimensiones, he probado a meter una etiqueta img y no me funciona, lo de las dimensiones aun no lo he probado

¿es posible meter una etiqueta img? no me funciona.

El objetivo es usar la alerta cuando tenga algo importante que avisar, y hacerlo como popup con una imagen, ya tengo todo listo para lanzar el popup y como texto va bien, me falta solo meter la imagen y por mas pruebas que hago no lo consigo.

carlos dice:

alguien por favor me ayuda a hacer un auto open porfavor…..

gracias de antemano

Lenyman dice:

Sexy! que bien puesto que está el nombre a estos scripts.. te felicito!
He llegado hasta aquí buscando mostrar un mensaje (y si es sexy, mucho mejor) apenas se carga la página principal del sitio. REvisando los comentarios, veo que hay otros con la misma duda…… podrías guiarnos en cómo llevarlo a cabo?
Desde ya muchísimas gracias!!

$(".borrar-entrada").click(function(){
			enlace=$(this).attr("href");
			Sexy.confirm('¿Realmente quieres borrarlo?', {
				textBoxBtnOk: 'Si',
				textBoxBtnCancel: 'No',
				onComplete: function(returnvalue) {
					if(returnvalue){
						window.location.href = enlace;
					}
				}
			});
			return false;
		});

how to change the width of the alert box ?

KontYentE dice:

Is there a way to add

filter:alpha(opacity=70

instead the

opacity.70

This value could be hold in the css file, than we could make it possible to realize opacity in IE. The only thing i see is a 100% black background.

Alan dice:

How can I dynamically set the icon image for these alert boxes?

Thanks.

Joshi dice:

I want to call Sexy alert box from code behind means i am working with .NET so i want to call it from my C # file…how can i call this alert..please help me ..

Great post Really very useful tool …thank you very much

etisdemian dice:

hola, exelente material!

me pregunto porque no lo reconoce ie,
sé poco sobre js y me gustaria que se adaptara a explorer,sólo logro usarlo atraves de firefox.

muchísimas gracias.

desde chile.