Powiadomienie jQuery Tools działa raz (ale tylko raz)

Question

Próbuję zbudować prosty mechanizm alertów za pomocą narzędzi jQuery - w odpowiedzi na niewielką ilość kodu JavaScript, wyskakuję nakładkę z komunikatem i przyciskiem OK, który po kliknięciu sprawia, że ​​nakładka zniknie. Trivial, albo powinien być. Byłem niewolniczo podążając za http://flowplayer.org/tools/demos/overlay/trigger.html i mam coś, co działa dobrze po raz pierwszy, kiedy się go przywołuje, ale tylko wtedy. Jeśli powtórzę operację JS, która powinna wystawić nakładkę, nie działa.

Moja zawartość/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> 

i JavaScript:

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

Jak powiedziałem: Po showOverlayDialog() jest wywoływana po raz pierwszy, nakładka pojawi się tak jak powinien, i zniknie po kliknięciu przycisku "OK". Ale jeśli spowoduję, że funkcja showOverlayDialog() zostanie uruchomiona ponownie, bez ponownego ładowania strony, nic się nie stanie. Jeśli ponownie załaduję stronę, wzorzec się powtarza - pierwsze wywołanie wywołuje nakładkę, ale druga nie.

Najwyraźniej czegoś brakuje - jakakolwiek rada tam jest? Dzięki!

Answer 1

Zdefiniuj okno i ustawić load false (wyłączając automatyczne obciążenie oknie):

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

Następnie w przewodnika, który pokazuje okno, należy wywołać loadapi method:

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

(Przypisuje zdarzenie click do elementu o identyfikatorze show, który pokazuje nakładkę)

Praca exa Tutaj: http://jsfiddle.net/andrewwhitaker/Vqqe6/

Nie wierzę, że jesteś w stanie zdefiniować więcej niż jedną nakładkę na konkretny element, który był przyczyną problemu.