Actualización: Sexy Alert Box 1.1

Actualizada la versión de Sexy Alert Box!

En la nueva versión (1.1) se corrigieron dos cosas:
1) Ahora, las imágenes del diseño del alerta se cargan al inicio de la página! Ya no hará ese efecto que hacia la primera vez que veías el alerta.
2) Internet Explorer 6, nuestra pesadilla, mostraba incorrectamente los elementos “Select”, y “Flash” por delante del overlay. Ahora, solo si estás usando ese navegador, el script los oculta mientras se produce el efecto. Al terminar el alerta, se vuelven a mostrar.

También adjunté la versión comprimida del MooTools (60KB) frente a los 90KB anteriores.

A continuación, varias dudas que surgieron en los comentarios:

¿Como mostrar un mensaje al cargar una página?

Simplemente debes mostrar el alerta inmediatamente después de crear el objeto ‘Sexy’:

<script type="text/javascript">
window.addEvent('domready', function() {
    Sexy = new SexyAlertBox();
    Sexy.alert("<b>Bienvenido!</b> <p>Este es un mensaje de bienvenida</p>");
});
</script>

¿Como mostrar un alerta, si una condición (en PHP) es falsa?

Para ello debes instalar en la página el script. Si no sabes como hacerlo, lee la Guia.

Estas son las líneas que deberías tener:

<script src="mootools.js" type="text/javascript"></script>
<script src="sexyalertbox.v1.js" type="text/javascript"></script>
<link rel="stylesheet" href="sexyalertbox.css" type="text/css" media="all" />
<script type="text/javascript">
window.addEvent('domready', function() {
    var Sexy = new SexyAlertBox();
});
</script>

No importa si la condición (hipotética en este caso) es verdadera o falsa, cargamos la clase en el <head> para poder usarla en el futuro.
Luego desde PHP, hacemos el trabajo:

if ($condicion == false) {
  echo '<script type="text/javascript">window.addEvent("domready", function() {Sexy.error("<b>Error!</b> <p>Ha ocurrido un error, ya que la condición parece ser falsa!</p>")});</script>';
}

Que rayos hice? Si estamos mostrando el mensaje al cargar la página, siempre, pero SIEMPRE debe ir dentro del evento domready, de lo contrario producirá error.

La excepción es, si estamos usando el alerta en enlaces (a través del evento onclick).

Descargar

Descarga SexyAlertBox.zip (SexyAlertBox.js + mootools + ejemplos)
Descarga SexyAlertBox.packed.js (versión comprimida)

No te olvides de comentar! Deja tus dudas y sugerencias! Gracias.

Alex dice:

No se como puedo ser el primero.

Esta noticia me encanta!

oscar dice:

solo una aclaracion, si queires para un evento onclick igual debe de ir dentro del domready, creas un evento al id del elemento que quieres que se ejecute en el click, por ejemplo:

	$('id').addEvent('click', function(){
          sexyalert.error .......
	});

me encanta tu script!! muy bueno, no lo he usado en algun proyecto, ya habia implementado el growl que esta bien padre igual pero éste lo rebasa!

saludos!

dC! dice:

No consigo ejecutarlo en una pagina php que estoy haciendo =S
.. este es mi codigo:
<!– ———————————————————————– –>
<script src=”../funciones/SexyAlertBox/mootools.js” type=”text/javascript”></script>

<link rel=”stylesheet” href=”../funciones/SexyAlertBox/sexyalertbox.css” type=”text/css” media=”all” />

<script src=”../funciones/SexyAlertBox/sexyalertbox.packed.js” type=”text/javascript”></script>

<script type=”text/javascript”>
window.addEvent(‘domready’, function() {
Sexy = new SexyAlertBox();
});
</script>
<!– ———————————————————————– –>
<?php
.. antes realizo mi conexion y luego en una de mis consultas ..
if($row = mysql_fetch_array($resultque)) {

echo ‘<script type=”text/javascript”>window.addEvent(“domready”, function() {Sexy.alert(“El nombre de usuario ya existe, por favor especifique otro.”)});</script>’;

?>
Aclaro que en este archivo .php que tengo es solo codigo php y no tengo html (el form html esta en otro archivo pero solo es la pura interfaz y de ahi mando a llamar al script php. Todo lo que quiero es poder mostrar el mensaje Sexy Alert Box dentro de mis tagas php, pero como?

Javi dice:

Hola, tengo un formulario que cuando se valida muestra un alert agradeciendo el ingreso de los datos, es para un libro de visitas.
El problema es que he cambiado ese alert por una llamada a sexy.alert pero no consigo que funcione igual que el alert, o se para y no continua ejecutandose la página y no envia el formulario o se envia pero no se para.

var f = document.guestbook;

		if(validarExplorer(f)) {
			//alert ("Gracias " +  f.user.value + " por insertar un comentario en nuestro libro de visitas");
			Sexy.alert('Web del C.D. BeloradoGracias por insertar un comentario en nuestro libro de visitas');
			f.action = "guestbook.php?pag=1";
			f.submit();
		}
	}
Eduardo dice:

Hola Javi: para eso existen los eventos (onComplete) te recomiendo ver los ejemplos y la documentación para entender como funciona.

var f = document.guestbook;

if(validarExplorer(f)) {
  //alert ("Gracias " +  f.user.value + " por insertar un comentario en nuestro libro de visitas");
  Sexy.alert('Web del C.D. BeloradoGracias por insertar un comentario en nuestro libro de visitas', {
    onComplete: function(returnvalue) {
        f.action = "guestbook.php?pag=1";
        f.submit();
    }
  });
}

Saludos!

¿Este comentario te ha servido? y colabora con el blog
Responder
_SxR_ dice:

Hola!!!

Estoy intentando cargar una alerta al inicio de la web y está basada en Joomla… y no consigo que funcione.

Tengo este código cargardo entre las etiquedas de emcabezado del index.php del template de la web:

window.addEvent(‘domready’, function() {
Sexy = new SexyAlertBox();
Sexy.alert(“Bienvenido! Este es un mensaje de bienvenida”);
});

frenchy dice:

Hi,

i am a french developper and i don’t really understand spanish ;-)
So i will speak to you in English :-)

First of all, this alert box is marvelous ;-)

Know, here is my problem: i a have got a function like this:

function submitform(){
	if(trim($('password').value).length&lt;4){
		myalert.alert('problem');
		$('password').className="champsko";
		$('password').focus();
		return false;
	}
	if(other test){
		myalert.alert('problem2');
		return false;
	}
	$('myform').submit();
}

when i do the submitform() function, i have got the alert but when a close it with the OK button, IE7 (and ie6) freeze :-(
No problem with Firefox 3…

Do you understand where the problem is???

Thanks a lot ;-)
Luc

Eduardo dice:

You can try replace:

$('myform').submit();

with this:

return true;
¿Este comentario te ha servido? y colabora con el blog
Responder
Norant dice:

_ Maestro tengo un problema, e anidado textBoxBtnOk y onComplete, en el ultimo quiero que regrese el foco, pero no lo hace, tengo algun error en el codigo, la consola de errores no me muestra nada, pero consigo mover el foco al campo especificado.
Sexy.alert(‘    Interseguro’+missinginfo, {textBoxBtnOk: ‘Aceptar’}, {
onComplete: function(returnvalue) {
if(returnvalue){
document.form.Appat.focus();
}
}
});

Juan Pablo dice:

Hola
esta de poca tu script, pero se puede implementar en una validacion,
ejemplo que si un campo de un formulario no esta llenado, lo indique en un SexyAertBox

Jose Eduardo dice:

Hola a todos, en ASP.NET, por debajo en el codigo vbasic.net, necesito que el SexyAlert se dispare cuando por decir una variable tiene un valor. Ejemplo. hago una consulta SQL a una base de datos y la tabla me retorna true o false.
He probado el codifgo de SexyAlert al cargar la pagina y si funciona, pero cuando lo coloco en el Response.write, como sigue ´no me funciona.
Alguien me puede guiar como puedo solcionar este problema?

Dim variable as string
variable = “window.addEvent(‘domready’, function() {Sexy.error(‘Error! Ha ocurrido un error, ya que la condición parece ser falsa!’)});”
Response.Write(variable)

jose dice:

Muchas gracias aun no lo manejo bien, pero agradezco mucho esto

jose dice:

Hola.
Estuve probando el sexy alert, y me ha funcionado muy bien, pero tengo un problema.
No habria forma de ponerle al foco al boton ok del sexy.alert??
es para no tener que usar el mouse y hacer click, mas bien dar Enter como el alert de javascript.
agradezco de antemano

Sorry, unfortunately I will have to dispute with this story. Having said that, I understand that in fact all of us all have our specific position.