La alerta de jQuery Tools funciona una vez (pero solo una vez)

Question

Estoy intentando crear un mecanismo de alerta simple con jQuery Tools: en respuesta a un código JavaScript, aparece una superposición con un mensaje y un botón Aceptar que, cuando se hace clic, hace que la superposición desaparezca. Trivial, o debería ser. He estado siguiendo servilmente http://flowplayer.org/tools/demos/overlay/trigger.html, y tengo algo que funciona bien la primera vez que se invoca, pero solo ese momento. Si repito la acción JS que debería exponer la superposición, no lo hace.

Mi contenido/DIV:

<div class='modal' id='the_alert'> 
    <div id='modal_content' class='modal_content'> 
    <h2>hi there</h2> 
    this is the body 
    <p> 
    <button class='close'>OK</button> 
    </p> 
    </div> 
    <div id='modal_background' class='modal_background'><img src='/images/overlay/f9f9f9-180.png' class='stretch' alt='' /></div> 
</div> 

y el Javascript:

function showOverlayDialog() { 
$('#the_alert').overlay({ 
    mask: {color: '#cccccc', loadSpeed: 200, opacity: 0.9}, 
    closeOnClick: false, 
    load: true 
}); 
} 

Como ya he dicho: Cuando showOverlayDialog() se invoca por primera vez, la superposición se muestra como debería, y desaparece cuando se hace clic en el botón "Aceptar". Pero si hago que showOverlayDialog() se ejecute de nuevo, sin volver a cargar la página, no pasa nada. Si vuelvo a cargar la página, el patrón se repite: la primera invocación muestra la superposición, pero la segunda no.

Obviamente me falta algo, ¿algún consejo? ¡Gracias!

Answer 1

Definir el diálogo y establecer load en false (la desactivación de carga automática del cuadro de diálogo):

$('#the_alert').overlay({ 
    mask: { 
     color: '#cccccc', 
     loadSpeed: 200, 
     opacity: 0.9 
    }, 
    closeOnClick: false, 
    load: false 
}); 

A continuación, en el controlador que muestra el cuadro de diálogo, llame a la loadapi method:

$("#show").click(function() { 
    $("#the_alert").data("overlay").load(); 
}); 

(Asigna un evento de clic a un elemento con id de show que muestra la superposición)

Ex trabajando aquí: http://jsfiddle.net/andrewwhitaker/Vqqe6/

No creo que pueda definir más de una superposición en un elemento en particular, que estaba causando su problema.