JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://dl.dropbox.com/u/46895700/code/shadowbox-3.0.3/shadowbox.js"></script>
<link rel="stylesheet" href="http://dl.dropbox.com/u/46895700/code/shadowbox-3.0.3/shadowbox.css">
<a class="open-first-btn">open first</a>
<a class="open-second-btn">open second</a>
<!-- <a class="open-third-btn">open third</a> -->
<div id="status"></div>
CSS
a { color:#00f; text-decoration:underline; display:block; margin-bottom:10px; cursor:pointer; }
#sb-body, #sb-loading { background:#eee; }
JavaScript
Shadowbox.init();
window.onload = function(){
function logger(msg){
$('#status').html(msg).show().fadeOut(1000);
}
var shadowbox_orig_open = Shadowbox.open;
Shadowbox.reOpenable = function(new_opts) {
if(Shadowbox.isOpen()){
// close other dialog
Shadowbox.options.onClose(Shadowbox.getCurrent());
if(new_opts.player == "html"){
$('#sb-player').fadeOut('normal', function(){ $(this).html(new_opts.content).fadeIn(); });
}else{
// ???
}
// set other new hooks
Shadowbox.options = new_opts.options;
}else{
shadowbox_orig_open(new_opts);
}
};
$('.open-first-btn').live('click', function(e){
e.preventDefault();
Shadowbox.reOpenable({
content: 'First window. <a class="open-second-btn">open second window</a>',
player: "html",
options: {
onClose: function(){ logger('First window closes!'); }
}
});
});
$('.open-second-btn').live('click', function(e){
e.preventDefault();
Shadowbox.reOpenable({
content: 'Second window. <a class="open-first-btn">open first window</a>',
player: "html",
options:{
onClose: function(){
logger("Second window closes!");
}
}
});
});
// $('.open-third-btn').live('click', function(e){
// e.preventDefault();
// Shadowbox.reOpenable({
// content: 'shadowbox.js',
// player: "iframe",
// options:{
// onClose: function(){
// $('#status').html("Third window closes!");
// }
// }
// });
// });
};