2011-11-08 7 views
5

Sto provando a utilizzare shadowbox in più occasioni: a volte mi capita di aver bisogno di più di una finestra di dialogo allo stesso tempo.Shadowbox - Come cambiare o sostituire il contenuto? Come chiudere e aprire un'altra finestra di dialogo?

In questo semplice esempio, provo a chiudere una finestra esistente e riaprire un'altra, ma non apre la seconda. Cosa sto facendo di sbagliato?

<!DOCTYPE HTML> 
<html> 
<head> 
    <link rel="stylesheet" href="shadowbox.css" type="text/css"> 
    <style type="text/css" media="screen"> 
     #sb-body, #sb-loading { background:#eee; } 
    </style> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script> 
    <script src="shadowbox.js" type="text/javascript" charset="utf-8"></script> 

    <script type="text/javascript"> 

     Shadowbox.init(); 

     window.onload = function(){ 

      Shadowbox.open({ 
       content: 'First window. <a id="open-second" href="http://www.google.com">open another window</a>.', 
       player: "html" 
      }); 

      $('#open-second').live('click', function(e){ 
       e.preventDefault(); 

       Shadowbox.close(); 
       Shadowbox.open({ 
        content: 'Second window.', 
        player: "html" 
       }); 
      }); 
     }; 
    </script> 
</head> 
<body>blabla.</body> 
</html> 

saluti,
Adit

risposta

1

dispiace 'bout questo, ma penso che mi muoverò verso colorbox come sembra molto più stabile:

$('#second-btn').live('click', function(e){ 
    e.preventDefault(); 
    $.colorbox({ 
    onComplete: function(){ 
     $('#cboxLoadedContent').append('second opened'); 
     $('#cboxClose').attr('id', 'cboxClose_disabled'); 
    }, 
    html:'<p>Second <a id="first-btn" href="x">first</a></p>', 
    width: 500, height: 200 
    }); 
}); 

function showfirst(){ 
    $.colorbox({ 
    onLoad: function(){ $('#cboxClose_disabled').attr('id', 'cboxClose'); }, 
    onComplete: function(){ $('#cboxLoadedContent').append('first opened') }, 
    html:'<p>First <a id="second-btn" href="x">second</a></p>', 
    width: 500, height: 200 
    }); 
} 

$('#first-btn').live('click', function(e){ 
    e.preventDefault(); 
    showfirst() 
}); 

showfirst(); 

Ehi, sto parlando da solo ?! XD

+0

Avevo lo stesso problema di te, o meglio, stavo cercando di aprire una shadowbox o di aggiornarla con nuovi contenuti una volta premuto un collegamento interno. Ho seguito il tuo consiglio e sono passato a Colorbox. Funziona e fa quello che voglio. Grazie :) –

0

Ecco quello che userò; non contento di questo:
- Sto forzando un plug-in ampiamente utilizzato facendo una semplice operazione (chiudi una finestra e apri un'altra)
- ha bisogno di sovrascrivere ogni funzione shadowbox (ora è implementato solo il player "html").

Qui uno full working example.

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); 
    } 
}; 
Problemi correlati