CallBack facebox – chamando o modal de dentro do modal
Galera está tendo bastante dificuldade com isso hoje em dia.
Tenho um modal, que abre pegando um conteúdo com ajax ou não.
O ponto é que os plugins de modal(ou a maioria deles), e também o facebox que é o caso que vou demonstrar agora, reescrevem o conteúdo com js, então perdemos qualquer função atrelada que tínhamos.
Com “Defeito”
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="src/facebox.js"></script> <link href="src/facebox.css" media="screen" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(document).ready(function(){ $('a[rel*=facebox]').facebox({ loadingImage : 'src/loading.gif', closeImage : 'src/closelabel.png' }); }); </script> <style type="text/css"> .modal { display: none; } </style> </head> <body> <a href="#modal" rel="facebox">Abrir Modal</a> <div id="modal" class="modal"> Modal <a href="#modal2" rel="facebox">Abrir outro modal</a> </div><!-- /modal --> <div id="modal2" class="modal"> Segundo Modal. </div><!-- /modal --> </body> </html>
Note que clicando no link do segundo modal, oque acontece é que a URL muda para #modal2, e o comportamento de abrir outro modal não é feito.
Por causa do que eu disse, do conteúdo do modal ter sido reescrito com js, então o link:
<a href="#modal2" rel="facebox">Abrir outro modal</a>
não teve o comportamento atrelado.
Precisamos, logo depois de abrir o primeiro modal, colocar esse comportamento nos links lá.
Uma forma elegante de fazer isso, é no callback do próprio modal, rodarmos a rotina:
$(document).bind('afterReveal.facebox', function(){ $('#facebox .content a').facebox({ loadingImage : 'src/loading.gif', closeImage : 'src/closelabel.png' }); });
Não fiz nada de anormal, ou super.
Apenas li a documentação, e entendendo o motivo de ter falhado, resolvi.