jQuery Tools alert works once (but only once)

Question

I'm trying to build a simple alert mechanism with jQuery Tools -- in response to a bit of Javascript code, pop up an overlay with a message and an OK button that, when clicked, makes the overlay go away. Trivial, or it should be. I've been slavishly following http://flowplayer.org/tools/demos/overlay/trigger.html, and have something that works fine the first time it's invoked, but only that time. If I repeat the JS action that should expose the overlay, it doesn't.

My content/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>

and the Javascript:

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

As I said: When showOverlayDialog() is invoked the first time, the overlay appears just like it should, and goes away when the "OK" button is clicked. But if I cause showOverlayDialog() to run again, without reloading the page, nothing happens. If I reload the page, then the pattern repeats -- the first invocation brings up the overlay, but the second one doesn't.

I'm obviously missing something -- any advice out there? Thanks!

Sardonyx

What are you attaching to your Close button? At a glance it seems like you may be manipulating HTML to hide the overlay rather than using JQuery - hence JQuery thinks the overlay is already open and won't re-display it. This may be an incorrect analysis but if you could post the full source, we may be able to help further – Handstand

I'm not attaching anything to the Close button. My (limited) understanding of jQuery Tools is that assigning the OK button to class=close makes something automatic happen down in the jQuery Tools code, which causes the overlay to go away. In any case, I don't have any other jQuery or javascript handlers around doing things to the structure. – Sardonyx

Answer 1

Define the dialog and set load to false (disabling auto-load of the dialog):

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

Then in your handler that shows the dialog, call the load api method:

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

(Assigns a click event to an element with id of show which shows the overlay)

Working example here: http://jsfiddle.net/andrewwhitaker/Vqqe6/

I don't believe you're able to define more than one overlay on a particular element, which was causing your problem.

Graces

Got it -- thanks much! I had to tweak it a bit to make it fit in what's really going on with the page, but all's well. Sounds like an answer to me; thanks! – Sardonyx

Almost 1 year later and this answer is still useful to someone. Thanks, @Andrew. +1 – Asthenic

I had to set true for load – Coda

The "load api method" link in the answer is dead - 404 Not Found | Apologies! | We couldn't find what you're looking for. – Aindrea