jQuery Tools Warnung funktioniert einmal (aber nur einmal)

Question

Ich versuche, einen einfachen Alarmmechanismus mit jQuery Tools zu erstellen - als Antwort auf ein wenig Javascript-Code, öffnen Sie ein Overlay mit einer Nachricht und einem OK-Button, Wenn Sie darauf klicken, verschwindet die Überlagerung. Trivial oder sollte es sein. Ich habe sklavisch gefolgt http://flowplayer.org/tools/demos/overlay/trigger.html, und etwas, das gut funktioniert, das erste Mal, wenn es aufgerufen wird, aber nur diese Zeit. Wenn ich die JS-Aktion wiederhole, die das Overlay verfügbar machen soll, tut es das nicht.

Mein Inhalt/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> 

und Javascript:

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

Wie gesagt: Wenn showOverlayDialog() das erste Mal aufgerufen wird, das Overlay erscheint nur, wie es sollte, und geht weg, wenn der "OK" -Button angeklickt wird. Aber wenn ich zeige, dass showOverlayDialog() erneut ausgeführt wird, ohne die Seite neu zu laden, passiert nichts. Wenn ich die Seite neu lade, wiederholt sich das Muster - der erste Aufruf ruft die Überlagerung auf, der zweite jedoch nicht.

Ich vermisse offensichtlich etwas - irgendeinen Rat da draußen? Vielen Dank!

Answer 1

den Dialog definieren und load auf false (Deaktivieren auto-Last des Dialogs):

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

Dann in Ihrem Handler, der den Dialog zeigt, rufen Sie die loadapi method:

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

(Weist einem Element mit der ID show, das das Overlay anzeigt, ein Klickereignis zu)

Working exa mple hier:

Ich glaube nicht, dass Sie mehr als eine Überlagerung auf einem bestimmten Element definieren können, das Ihr Problem verursacht hat.