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.
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).
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.
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(); } });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
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
me podrian mostrar un ejemplo en php de como implementarlo porfavor.
se puede agrandar el ancho del popup? Muchas gracias!
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:
Me sale un error que me dice que : ‘Sexy’ is undefined
gracias de antemano
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:
Me sale un error que me dice que : ‘Sexy’ is undefined
gracias de antemano
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
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.
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.
Sera posible mostrar el mensaje de error sin utilizar un enlace??
Necesito mostrar este error pero desde un echo en php
Gracias
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") ,''); },hola a todos soy nueva programando y quiero insertar este sexyalert que esta buenisimo pero me sale error al ejecutar me pueden ayudar
gracias
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>do u have any english version of this article?
thnaks
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!
Disculpen necesito ayuda, quisiera saber si se puede mostrar una alerta pero sin utilizar un enlace o boton.
Es urgente. Gracias
claro que se puede que quieres hacer?
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?
try this:
window.addEvent('domready',function(){ Sexy.alert('Hello World'); });Very very nice, thank you very much..
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?