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!
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With