Germano Assis Postado Janeiro 3, 2012 Denunciar Share Postado Janeiro 3, 2012 (editado) Olá pessoalGostaria de deixar aqui um exemplo de como usar um modal dentro do outro com jQuey e Fancybox e ainda editar elementos da página a partir do modal.Quem gostar divulgue. Eu mesmo passei muito tempo batendo cabeça com isso até ter essa ideia.Abraços.Index.html Página principal dando os includes das bibliotecas<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script src="jquery-1.6.2.js" type="text/javascript"></script> <script src="./fancybox/source/jquery.fancybox.js" type="text/javascript"></script> <link rel="stylesheet" href="./fancybox/source/jquery.fancybox.css" type="text/css" media="screen" /> </head> <body > <script type="text/javascript"> $(document).ready(function() { $(".teste").fancybox({modal : true}); }); </script> <input id="texto" value=""/> <a class="teste fancybox.iframe" href="http://localhost/teste/modal/frame.php">Open iframe</a> </body> </html> frame.php página que irá ser aberta no iFrame da página principal <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script src="jquery-1.6.2.js" type="text/javascript"></script> <script src="./fancybox/source/jquery.fancybox.js" type="text/javascript"></script> <link rel="stylesheet" href="./fancybox/source/jquery.fancybox.css" type="text/css" media="screen" /> </head> <body > <script type="text/javascript"> $(document).ready(function() { $(".interno").fancybox( {modal : true} ); }); </script> <a class="interno fancybox.ajax" href="http://localhost/teste/modal/dentro.php">Open iframe</a> <input id="texto" value=""/> <button onclick="parent.$('#texto').val($('#texto').val());">Add</button> <button onclick="parent.$.fancybox.close();">fechar</button> </body> </html> dentro.php página que vai ser aberta dentro do modal do iFrame por requisição ajax <button onclick="$.fancybox.close();">fechar</button>Nada impede de haver mais niveis utilizando iFrames nem de que todos os modais sejam carregados em iFrames.Espero ter ajudado. []'s Editado Janeiro 3, 2012 por Germano Assis Citar Link para o comentário Compartilhar em outros sites More sharing options...
Pergunta
Germano Assis
Olá pessoal
Gostaria de deixar aqui um exemplo de como usar um modal dentro do outro com jQuey e Fancybox e ainda editar elementos da página a partir do modal.
Quem gostar divulgue. Eu mesmo passei muito tempo batendo cabeça com isso até ter essa ideia.
Abraços.
Index.html Página principal dando os includes das bibliotecas
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script src="jquery-1.6.2.js" type="text/javascript"></script> <script src="./fancybox/source/jquery.fancybox.js" type="text/javascript"></script> <link rel="stylesheet" href="./fancybox/source/jquery.fancybox.css" type="text/css" media="screen" /> </head> <body > <script type="text/javascript"> $(document).ready(function() { $(".teste").fancybox({modal : true}); }); </script> <input id="texto" value=""/> <a class="teste fancybox.iframe" href="http://localhost/teste/modal/frame.php">Open iframe</a> </body> </html>frame.php página que irá ser aberta no iFrame da página principal<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script src="jquery-1.6.2.js" type="text/javascript"></script> <script src="./fancybox/source/jquery.fancybox.js" type="text/javascript"></script> <link rel="stylesheet" href="./fancybox/source/jquery.fancybox.css" type="text/css" media="screen" /> </head> <body > <script type="text/javascript"> $(document).ready(function() { $(".interno").fancybox( {modal : true} ); }); </script> <a class="interno fancybox.ajax" href="http://localhost/teste/modal/dentro.php">Open iframe</a> <input id="texto" value=""/> <button onclick="parent.$('#texto').val($('#texto').val());">Add</button> <button onclick="parent.$.fancybox.close();">fechar</button> </body> </html>dentro.php página que vai ser aberta dentro do modal do iFrame por requisição ajaxNada impede de haver mais niveis utilizando iFrames nem de que todos os modais sejam carregados em iFrames.
Espero ter ajudado. []'s
Editado por Germano AssisLink para o comentário
Compartilhar em outros sites
0 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.