Msgbox con CSS y Ajax

Si estás haciendo una web 2.0 totalmente alucinante y para mostrar un simple mensaje al visitante optas por redirigirlo a otra página que realmente no sirve para nada, o haces uso de alguna librería muy pesada para mostrar una ventanita con Javascript o, simplemente, no te gusta demasiado cómo queda lo que tienes deberías echarle un vistazo a la librería que Andrey Okonetchnikov ha creado.

Basada en los dialogos que muestra Mac OS X presenta un cuadro con un efecto desde arriba que cada realmente bien. Pesa 28,1 Kb incluyendo la hoja de estilo y la imagen para cerrar la ventana.

El uso es muy simple. Hay que incluir el archivo de script y el css.

<script type="text/javascript" src="../js/modalbox.js"></script>
<link rel="stylesheet" href="../js/modalbox.css" type="text/css"/>

Y en el lugar que queramos que aparezca podemos hacer algo tan simple como esto:

Modalbox.show('pagina_por_ajax.html');

O un poco más elaborado:

Modalbox.show('inputBox.php',
{title:'Título',width:300,height:200,
method:'post',
params:{mensaje:'Hola mundo'}});

Como se puede ver, se pueden pasar fácilmente parámetros a la página de destino que queremos que se muestre. También se puede mostrar texto estático generado en la propia página.

Pero como reza el título, lo que busco es diseñar un cuadro que permita la interacción con el usuario. Y para ello, una vez tenemos el cuadro deberemos hacer estos arreglos.

El llamar a otra página para mostrar el cuadro nos ayudará a abstraer la funcionalidad que queremos ofrecer para distintas páginas. Pero esa misma abstracción nos hará un poco más difícil su uso.

Deberemos pasarle a la página que mostrará el contenido el nombre de 2 funciones que serán las encargadas de ejecutar las acciones cuando responda afirmativa o negativamente y crear dichas funciones, por supuesto.

Así tendríamos que añadir a la llamada anterior algo como esto:

params:{...,funcSi:'funcionSi',funcNo:'funcionNo'}

La página que muestra el contenido podría ser algo tan simple como esto:

<?php
echo $_POST['mensaje'];
?>
<div id="botones">
<input type="button" value="Sí" onClick="<?= $_POST['funcSi']?>()"/>
<input type="button" value="No" onClick="<?= $_POST['funcNo']?>()"/>
</div>

Y para terminar, las funciones llamadas desde la ventana deberían utilizar esta función:

Modalbox.hide();

Para ocultar la ventana ya que no hace falta. Con esto tendríamos un funcional (aunque aún no demasiado estético) cuadro de mensaje listo para usar.