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:





Puedes ver la demostración del script en el siguiente enlace: Ver demo.
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"/>
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.
Funciones públicas:
@param string msg
@param array propiedades
Muestra un alerta con el icono de alerta.
@param string msg
@param array propiedades
Muestra un alerta con el icono de información.
@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.
@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});
Evento para las funciones alert, confirm, prompt, info, error:
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');
}
}
});
El script es publicado bajo la licencia MIT.
Tranquilo! no saltes por la ventana [aún], puedes presentar todas tus dudas en el foro especialmente creado para Sexy Alert Box.
Nada. Pero puedes colaborar con el blog haciendo una donación. ![]()
Este artículo contiene los siguientes archivos:
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); } }); })); });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 }); //readyDear 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
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 }); //readyhow to hold javascript code for Sexy.confirm function
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
desde el momento que decis “boton asp” me perdí.
no puedo decirte si funciona, ya que nunca lo he probado. disculpa.
No sabes si alguien lo ha probado con VB.NET en una página aspx
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
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.
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.
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 />');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
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:
Thanks.
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.
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
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?
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?
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
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.
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?
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.
No defiendas tu ignorancia :/
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
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 ??
¿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?
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.
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.
alguien por favor me ayuda a hacer un auto open porfavor…..
gracias de antemano
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 ?
Is there a way to add
instead the
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.
How can I dynamically set the icon image for these alert boxes?
Thanks.
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
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.