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’:
Código Web
<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:
Código Web
<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:
Código Web
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).Descarga
SexyAlertBox.zip (
SexyAlertBox.js + mootools + ejemplos)
Descarga
SexyAlertBox.packed.js (
versión comprimida)