Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Janela modal jQuery UI responsiva com iframe

29-10-2016 20:18

O código abaixo é de uma janela modal jQuery UI responsiva, que chama, na janela, o conteúdo existente na própria página principal, e usa CSS de tema do jQuery, inclusive botão fechar, que é fora do código existente no arquivo.

<?php header("Content-Type: text/html; charset=ISO-8859-1",true); ?> <!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 name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title></title> <style> </style> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <style> #resizeToParent { border: 5px solid #aaa; } div[role="dialog"] { width:100% !important; height:100% !important; left:0 !important; box-sizing:border-box; } </style> <script> showDialog = function() { $('#myDialog').dialog({ title: 'resize me' }); $('#myDialog').bind("dialogresize", function(event, ui) { $('#myDialog #resizeToParent').css('height', ($('#myDialog').height() - 40) + 'px'); $('#myDialog #resizeToParent div').text('inner: ' + $('#myDialog #resizeToParent').css('height') + ' outer: ' + $('#myDialog').css('height')); }); } </script> </head> <body> <h4>Págna 1, fora da janela.</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis auctor tempus. Lorem ipsum dolor sit amet,</p> <p>Morbi dui lacus, placerat eget pretium vehicula, mollis id ligula. Nulla facilisi. </p> <br> <a href="#" onclick="showDialog()">Open</a> <div id="myDialog" style="display:none;"> <p>Hello world</p> <div id="resizeToParent" style="overflow:scroll"> <div style="background: #ffc; width: 30px; height: 100px;"> </div> </body> </html>

Eu o adaptei para chamar um iframe na janela, já chamando, dentro dele, a partir da página principal, uma página, com link para outra página no iframe; inseri botão voltar no próprio código, e informei CSS para possibilidade de personalização, mas deixei elementos com cores e larguras diferentes para facilitar o aprendizado e o entendimento (pois eu pensava que a janela se abria no iframe e é o contrário; ao menos neste caso); e, também, deixei responsivos os botões.

Não sei se o CSS da janela está correto, mas está fácil de personalizar.

Para se entender os componentes, deixei a janela em cor verde, um elemento responsivo (resize_janela) na cor amarela, o iframe na cor vermelha, e, para não cobrir o iframe, coloquei quadro branco na primeira página, e cinza na segunda página, sob os botões.

O funcionamento me parece adequado. Testei no notebook (no Firefox, IE, Chrome, Opera e Safari, para Windows) e no celular (no Firefox, Chrome e Opera, para Android).

Porém, quando fecho a janela, sobre a página principal, fica um pequeno botão escrito “close”, o qual, se não é acionado, ou se a página não é atualizada no navegador, trava a página.

Preciso de ajuda para encontrar o que faz esse botão aparecer ao se fechar a janela, e, também, que me digam se perceberem outros erros no código, para melhorá-lo. É a primeira vez que consigo fazer uma adaptação assim. Ele pode ser muito útil a quem precisar.

Eis as páginas:

Teste1.php:
<?php header("Content-Type: text/html; charset=ISO-8859-1",true); ?> <!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 name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Página 1</title> <style type="text/css"> .button{background-color:#fff;color:#000;border-color:#000;border-style:solid;border-width:1px;padding:15px 32px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;cursor:pointer}.button3{width:100%} .parent{width:100%;display:table;text-align:center}.parent > .child{display:table-cell;vertical-align:middle;height:200px;width:100%;background-color:grey;border-color:#ccc;border-style:solid;border-width:1px;padding:0} #janela{ background-color: green; position:fixed; top:5px; left:5px; bottom:5px; right:5px; width:90%; height:90%; margin:10px; z-index:4;} #resize_janela{background:yellow;position:fixed;width:90%;height:auto;overflow: auto;top:10px;left:10px;right:10px;bottom:10px; margin:15px;text-align:center;z-index:3;} #iframe{ background-color: red;top:0px; left:0px; bottom:0px; right:0px; width:70%; height:100%; margin:0; z-index:2;} .fechar_janela{cursor:pointer;position:fixed;padding:30px;right:15px;top:15px;font-family:arial;font-style:normal;font-weight:900;font-size: 16px;color:white;height: 15px;width: 30px;background-color: grey;text-decoration:none;z-index:4} </style> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#janela').dialog({ modal: true, autoOpen: false, //draggable: true, resizeable: true, //title: 'IFrame Modal Dialog' }); $('#janela').bind("dialogresize", function(event, ui) { $('#janela #resize_janela').css('height', ($('#janela').height())); //$('#janela #resize_janela').css('height', ($('#janela').height() - 40) + 'px'); $('#janela #resize_janela div').text('inner: ' + $('#janela #resize_janela').css('height') + ' outer: ' + $('#janela').css('height')); }); $('#goToMyPage').click( function() { url = 'teste2.php'; $("#janela").dialog("open"); $("#iframe").attr('src',url); return false; }); $("#janela, .fechar_janela").click(function(a){ a.target===this&&$("#janela").fadeOut(500) }); }); </script> </head> <body> <h1>Página 1, fora da janela.</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis auctor tempus. Lorem ipsum dolor sit amet,</p> <p>Morbi dui lacus, placerat eget pretium vehicula, mollis id ligula. Nulla facilisi. </p> <br> <section class="parent"> <div class="child"><a id="goToMyPage" href="#"><button class="button button3">Abrir página 2 na janela.</button></a> <div id="janela"> <div id="resize_janela"> <div class="fechar_janela">X</div> <iframe id="iframe"></iframe> </div> </div> </div> </section> </body> </html>

Teste2.php:
<?php header("Content-Type: text/html; charset=ISO-8859-1",true); ?> <!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 name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> .button{background-color:grey;color:#000;border-color:#000;border-style:solid;border-width:1px;padding:15px 32px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;cursor:pointer}.button3{width:100%} .parent{width:100%;display:table;text-align:center}.parent > .child{display:table-cell;vertical-align:middle;height:200px;width:100%;background-color:#fff;border-color:#ccc;border-style:solid;border-width:1px;padding:0} </style> <title>Página 2</title> </head> <body> <h1>Página 2, dentro da janela.</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis auctor tempus. Lorem ipsum dolor sit amet,</p> <p>Morbi dui lacus, placerat eget pretium vehicula, mollis id ligula. Nulla facilisi. </p> <br> <section class="parent"> <div class="child"><a href="teste3.php"><button class="button button3">Página 3</button></a></div> </section> </body> </html>

Teste3.php:
<?php header("Content-Type: text/html; charset=ISO-8859-1",true); ?> <!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 name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> .button{background-color:#fff;color:#000;border-color:#000;border-style:solid;border-width:1px;padding:15px 32px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;cursor:pointer}.button3{width:100%} .parent{width:100%;display:table;text-align:center}.parent > .child{display:table-cell;vertical-align:middle;height:200px;width:100%;background-color:grey;border-color:#ccc;border-style:solid;border-width:1px;padding:0} </style> <script type="text/javascript"> function goBack() { window.history.back(); } </script> <title>Página 3</title> </head> <body> <h1>Página 3, dentro da janela.</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis auctor tempus. Lorem ipsum dolor sit amet,</p> <p>Morbi dui lacus, placerat eget pretium vehicula, mollis id ligula. Nulla facilisi. </p> <br> <section class="parent"> <div class="child"> <a href="teste2.php"><button class="button button3">Página 2</button></a> <br> <br> <button class="button button3" onclick="goBack()">Voltar</button> </div> </section> </body> </html>

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Janela modal jQuery UI responsiva com iframe

29-10-2016 21:11

Esse botão é criado pelo jquery-ui.js chamado no teste1.php nessa linha

$.widget( "ui.dialog", { version: "1.10.3", options: { appendTo: "body", autoOpen: true, buttons: [], closeOnEscape: true, closeText: "close", ..

Agora eu não sei se esse botão no script original ficava escondido sobre outro elemento.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Re: Janela modal jQuery UI responsiva com iframe

29-10-2016 22:07

Sim. O script original eu postei no princípio do post. Eu descartei o tema CSS do jQuery. E não vi código do botão direto no script.

Eu tenho de baixar o arquivo jQuery e procurar pelo código do botão nele e anulá-lo?
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Janela modal jQuery UI responsiva com iframe

29-10-2016 22:13

Talvez o tema original é que faça o botão não ficar visível.
Se o botão não sumir com o tema original ai tem que baixar o jquery-ui e alterar por ele.
Parte do botão está no trecho que postei acima. Mas tem que estudar o código para eliminar esse botão sem afetar outras coisas, ou ver se pelo CSS original dá para ocultar ele.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Re: Janela modal jQuery UI responsiva com iframe

29-10-2016 22:21

Vou baixar os arquivo e procurar.
0
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Re: Janela modal jQuery UI responsiva com iframe

30-10-2016 12:29

Eu consegui desabilitar o botão fechar no arquivo jquery-ui.js, e, a quem usar o tema CSS, no arquivo jquery-ui.css.

Primeiro, procurei sobre o botão fechar (close) no arquivo jquery-ui.css, e encontrei este termo (não sei o nome correto disso. Qual é?) ui-dialog-titlebar-close, e comentei o bloco em que ele se encontra.

Depois, procurei por tal termo no arquivo jquery-ui.js, encotrando-o, assim como encontrando o termo uiDialogTitlebarClose, comentando blocos e linhas que os contêm.

A janela continua a abrir, não mais exibindo o botão fechar do código original.

Porém, ao fechar, agora, a janela, e tentar, novamente, chamar a página dentro dela, não se consegue isso, a não ser que se dê refresh no navegador. Como você disse, ao se mexer no código jQuery, algo poderia ser afetado, e creio que isso ocorreu ao se fechar a janela sem o código original de fechamento.

Você pode indicar como se pode, no código que incluí no script para fechar a janela, atualizar a página principal (creio que é isso) ao se fechar a janela?

Grato.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Janela modal jQuery UI responsiva com iframe

30-10-2016 12:48

No teste1.php após a linha

a.target===this&&$("#janela").fadeOut(500);

Adiciona

location.reload();

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Re: Janela modal jQuery UI responsiva com iframe

30-10-2016 19:08

Deu certo. Obrigado. Eu percebi que na janela modal com iframe recebendo a página, quando se linca outra página dentro da janela, o navegador é atualizado, e não fica o hash após o nome do arquivo na barra de endereços do navegador.

Na janela modal sem o iframe, o navegador não é atualizado, e fica o hash após o nome do arquivo.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Janela modal jQuery UI responsiva com iframe

30-10-2016 19:33

Se é necessário manter o hash troca o location.reload por:

location.href="suapagina.php#";

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Re: Janela modal jQuery UI responsiva com iframe

30-10-2016 21:04

Não entendo quando é necessário manter. Foi uma curiosidade, apenas. Vou procurar saber sobre o que você disse. Obrigado.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Janela modal jQuery UI responsiva com iframe

30-10-2016 21:17

Acho que o hash é por causa desse link

<a id="goToMyPage" href="#"><button class="button button3">Abrir página 2 na janela.</button></a>

É usado o hash para anular o endereço da página.

Em todo caso o correto seria atribuir o id ao button

<button class="button button3" id="goToMyPage">Abrir página 2 na janela.</button>

Tem alguns botões no seu código que tem que fazer essa correção.
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado