Germano Assis Posted January 3, 2012 Report Share Posted January 3, 2012 (edited) 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 Edited January 3, 2012 by Germano Assis Quote Link to comment Share on other sites More sharing options...
Question
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
Edited by Germano AssisLink to comment
Share on other sites
0 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.