Javascript para exibir "Popup" dentro de uma camada [RESOLVIDO] [JavaScript]

1. Javascript para exibir "Popup" dentro de uma camada [RESOLVIDO]

Enviado em 03/09/2013 - 11:58h

Olá pessoal,

não sou muito bom em Javascript, eu quero criar uma função em Javascript para abrir um link como se fosse uma popup dentro da própria página, eu fui reunindo vários códigos e consegui chegar quase 100% do que preciso, o único problema é que quando fecho esta "Popup", depois ela não abre novamente, só se recarregar a página:



<html>

<head>

    <meta http-equiv="Content-Language" content="pt-br">

    <script>

	function showiframe (url) {

	var main_id="mainfr";

	var script_id="showpop";

	var dlcontent='<dt style="span; background-color:#fff;text-align:right;border-bottom:2px solid #b1c2ab;clear:both;padding-bottom:4px"><span id="pstop" style=float:left;font-size:14px;font-weight:bold;margin-bottom:0px;margin-top:0px;color:#20510f;text-align:left">Digipaper Infromatica</span><span id="closeFreightPS" style="color:#035dcb;font-size:10px; cursor:pointer">FECHAR X</span></dt><dd style="clear:both"><iframe style="margin:0;padding:0;border:0;font-family:arial,georgia,sans-serif" name="pagseguro" src="'+url+'" height="345" width="530" scrolling="no" frameborder="0"></iframe></dd>';



document.getElementById("mainfr").innerHTML=''+dlcontent+'';



document.getElementById("mainfr").style.display="block";

document.getElementById("closeFreightPS").onclick=function(){fadeOut()};

var freightps=document.getElementById(main_id);

function fadeOut(){alpha=100;

var i=setInterval(function(){if(alpha<=0){clearInterval(i);

freightps.style.display="none"}setAlpha(alpha);

alpha-=5},1)}function fadeIn(){if(document.getElementById("mainfr").style.display=="none"){freightps.style.display="block";

alpha=0;

var i=setInterval(function(){if(alpha>=100){clearInterval(i)}setAlpha(alpha);

alpha+=5},1)}return false}function setAlpha(alpha){freightps.style.filter="alpha(opacity="+alpha+")";

freightps.style.opacity=alpha/100}if(navigator.appVersion.search("MSIE 6.0")!=-1){document.getElementsByTagName("html")[0].onscroll=function(){freightps.style.top=document.getElementsByTagName("html")[0].scrollTop+"px"}}document.getElementById("imgCalculoFrete").onclick=fadeIn;

 }

    </script>

    </head>

<body>

 

 

<p><a href="#" onclick="showiframe('http://www.globo.com')"; id="showpop">

Globo</a></p>

 

 

<p>

<a href="#" onclick="showiframe('http://www.terra.com.br')"; id="showpop">

Terra</a></p>

 

 <dl  id="mainfr" style="position:absolute; border: 2px solid #20510F;background:#fff;display:none;right:0;position:fixed;top:0;width:530px;z-index:99;padding:10px 10px 0"></dl>

</body>

</html>

Então por exemplo clica no Terra abriu a página dentro da janela, mas se fechar esta janela e clicar na Globo já não abre!

Grato.

2. Re: Javascript para exibir "Popup" dentro de uma camada [RESOLVIDO]

Melhor resposta

Enviado em 06/09/2013 - 19:54h

Código pronto, conforme você precisa.
Sem carregar as páginas, e ao clicar carregar a desejada.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Div Abrir Site</title>

<style>
#estilo_select{
color: #01725e;

font-weight:bold;
cursor:pointer;
}

#div_site{display:none;position:absolute;top:50%;left:50%;margin-left:-300px;margin-top:-300px;padding:10px;width:600px;height:600px;border:0px solid #000;z-index:100;}
</style>

<div id="div_site"><a onclick="document.getElementById('div_site').style.display='none';" style="cursor:pointer;">Fechar</a>
<iframe width='98%' height='98%' frameborder='1' src="" name="principal" align=center></iframe>
</div>
</head>
<body>
<font id="estilo_select" onclick="document.getElementById('div_site').style.display='block';window.open('http://www.globo.com.br';, 'principal');">Globo</font><br>
<font id="estilo_select" onclick="document.getElementById('div_site').style.display='block';window.open('http://www.terra.com.br';, 'principal');">Terra</font><br>
<font id="estilo_select" onclick="document.getElementById('div_site').style.display='block';window.open('http://www.uol.com.br';, 'principal');">UOL</font>
</body>
</html>

Caso resolva seus problemas finalize o tópico.

3. Re: Javascript para exibir "Popup" dentro de uma camada [RESOLVIDO]

Enviado em 06/09/2013 - 17:15h

Use Div para abrir popup é melhor.

Abrir uma popup div = onclick="document.getElementById('sua_popup').style.display='block';
Fechar uma popup div = onclick="document.getElementById('sua_popup').style.display='none';

4. Re: Javascript para exibir "Popup" dentro de uma camada [RESOLVIDO]

Enviado em 06/09/2013 - 17:53h

já abre e fecha a div, mas não reabre, acho que não se atentou ao problema antes de responder..

de qualquer forma agradeço.

5. div

Enviado em 06/09/2013 - 18:12h

Pelo que entendi, o post do gieri apontou a solução de ocultar/exibir uma DIV
um exemplo está em
http://www.htmlstaff.org/ver.php?id=22413
conforme você clica, você alterna entre exibir/ocultar o conteúdo da DIV (lembrando que DIV é um tópico de HTML, assim como <p>, <tab>,...)
com alguns ajustes, creio que o exemplo do código acima resolva seu problema

6. Re: Javascript para exibir "Popup" dentro de uma camada [RESOLVIDO]

Enviado em 06/09/2013 - 18:15h

daniel.uramg escreveu:

já abre e fecha a div, mas não reabre, acho que não se atentou ao problema antes de responder..

de qualquer forma agradeço.

Eu vi seu problema, no entanto você que não entendeu muinha sugestão, pois o iframe apresenta alguns problemas que não acontecem com as div.

Tive vários problemas com iframe, então parei de usa-los.

Acredito que o código esteja todo correto, e isso parece ser um problema dos iframe mesmo.

7. Re: Javascript para exibir "Popup" dentro de uma camada [RESOLVIDO]

Enviado em 06/09/2013 - 18:19h

mas o problema é que tem o javascript para montar o iframe
a div está abrindo e está fechando, mas não está REabrindo

se observar o código as funções de exibir (...style.display='block') e ocultar (...style.display='none') estão corretas e funcionando, mas acho que algo no JS que está errado

8. Re: Javascript para exibir "Popup" dentro de uma camada [RESOLVIDO]

Enviado em 06/09/2013 - 18:25h

gieri escreveu:

daniel.uramg escreveu:

já abre e fecha a div, mas não reabre, acho que não se atentou ao problema antes de responder..

de qualquer forma agradeço.

Eu vi seu problema, no entanto você que não entendeu muinha sugestão, pois o iframe apresenta alguns problemas que não acontecem com as div.

Tive vários problemas com iframe, então parei de usa-los.

Acredito que o código esteja todo correto, e isso parece ser um problema dos iframe mesmo.

Fui reunindo pedaços de códigos, ficou muito complexo mesmo..
vou tentar fazer somente com HTML "cru" mesmo e ver se da certo, o problema é que preciso que seja exibida uma Iframe mesmo dentro desta DIV

Grato!

9. Re: Javascript para exibir "Popup" dentro de uma camada [RESOLVIDO]

Enviado em 06/09/2013 - 18:34h

Segue o código funcionando.

Agora você pode adaptar da maneira que melhor lhe atenda.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Div Abrir Site</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />

<style>
#estilo_select{
color: #01725e;

font-weight:bold;
cursor:pointer;
}

#div_site{display:none;position:absolute;top:50%;left:50%;margin-left:-300px;margin-top:-300px;padding:10px;width:600px;height:600px;border:5px solid #ffffff;z-index:100;}
</style>

<div id="div_site"><a onclick="document.getElementById('div_site').style.display='none';" style="cursor:pointer;">Fechar</a>
<iframe width='98%' height='98%' frameborder='1' src='http://www.globo.com.br'; name="principal" align=center></iframe>
</div>
</head>
<body>
<font id="estilo_select" onclick="document.getElementById('div_site').style.display='block';">Globo</font>
</body>
</html>

10. Re: Javascript para exibir "Popup" dentro de uma camada [RESOLVIDO]

Enviado em 06/09/2013 - 19:24h

Gieri assim não da certo pois quando abre o HTML ele já vai carregar em segundo plano o site da Globo no caso
e também esta mesma função vou usar em uma página com pra jogar outras páginas dentro da DIV, então o URL tem que ser passada pelo atributo href
eu já tinha tentado de uma maneira parecida com essa e fiquei empacado por causa desse problema de carregar a página em bg e não consegui passar a URL sem criar uma função em JS, daí fui reunindo algumas funções em JS pra fazer, mas também não deu muito certo =/

11. Re: Javascript para exibir "Popup" dentro de uma camada [RESOLVIDO]

Enviado em 09/09/2013 - 21:02h

caramba agora ficou show!
perfeito mesmo, queria era uma ajuda mas já deu o código prontinho rsrs

Obrigado Gieri!!

Javascript para exibir "Popup" dentro de uma camada [RESOLVIDO]

Responder tópico