2

Precisava de criar um botão dentro de um iframe em um canto para o fechar. Tenho uma galeria de imagens e ao clicar em uma imagem vai abrir um iframe, o seguinte código já faz isso.

Mas agora precisava de criar um botão em um canto dentro do iframe (preferência no canto superior direito) ao ser pressionado o botão teria de fechar o iframe. Atenção as páginas que vou abrir pelo iframe não tenho acesso ao código. E Após fechar o iframe através do botão deve ser possível voltar a abrir o mesmo clicando na galeria de imagens.

Alguma ideia de como eu o possa fazer?

Tenho o seguinte código já feito:

<div class="gallery">
  <a target="iframe1" href="https://www.google.pt">
    <img src="images\pt.png" alt="PT" width="300" height="200">
  </a>
  <div class="desc">Google PT</div>
</div>

<div class="gallery">
  <a target="iframe1" href="https://www.google.co.uk/">
    <img src="images\en.png" alt="EN" width="300" height="200">
  </a>
  <div class="desc">Google EN</div>
</div>

<div id="nav">
  <iframe name='iframe1' id='link' width="800" height='500' style="border:none;"></iframe>
</div> 
4
  • @AndersonCarlosWoss a página que vou mostar no iframe não tenho acesso a ela, logo preciso eu proprio de o criar
    – Tmc
    Commented 11/09/2017 às 13:39
  • @AndersonCarlosWoss a outra pergunta e bem parecida mas não me consegue ajudar
    – Tmc
    Commented 11/09/2017 às 13:39
  • Entendi. Achei que as páginas que estavam na pergunta eram apenas exemplos. Irei remover esses comentários e o voto para fechar. Aliás, por quê o botão precisa estar no iframe e não na sua própria página?
    – Woss
    Commented 11/09/2017 às 13:41
  • @AndersonCarlosWoss na realidade não vou usar essas páginas, não deixam de ser exemplo.. contudo as páginas que vou usar não tenho acesso a elas a mesma...
    – Tmc
    Commented 11/09/2017 às 13:43

3 Respostas 3

4

Se a função do botão será apenas ocultar o iframe, não vejo porquê você inserí-lo dentro do mesmo; você pode criar o botão na sua página e apenas posicioná-lo sobre o iframe, na posição desejada. Veja um exemplo:

.iframe {
  position: relative;
}

.iframe button {
  position: absolute;
  right: 10px;
  top: 10px;
  color: red;
}
<div class="iframe">
  <iframe src="https://vignette.wikia.nocookie.net/hitchhikers/images/2/2f/The-Hitchhikers-Guide-to-the-Galaxy-586-5.jpg/revision/latest?cb=20110623191658" frameborder="0" width="100%" height="480"></iframe> 
  <button onclick="this.parentElement.style.display='none';">X</button>
</div>

Perceba que o button está definido na sua própria página, não necessitando de definí-lo dentro do iframe.

3
  • Percebi perfeitamente o código está em falta apenas uma coisa que esqueci de mencionar na pergunta, vou já acrescentar. Abri o iframe bem, consegui fechar com o botão também, mas eu pretendo voltar a abrir o iframe quando voltar a clicar em uma imagem da galeria. Obrigado pela ajuda
    – Tmc
    Commented 12/09/2017 às 7:34
  • A lógica é exatamente a mesma. O que tentou fazer?
    – Woss
    Commented 12/09/2017 às 10:36
  • Sim, já consegui mas tive de usar JS, obrigado pela ajuda
    – Tmc
    Commented 12/09/2017 às 11:16
0

Este código é preciso usar jquery.

Se o iframe não pode deixar de existir, então na pagina que você chama no iframe faça o botão e coloque o id do elemento que você quer remover desta forma:

$(function(){
     $("#id_do_botao_fechar").click(function() {
          $("#id_elemento").remove();
     });
});

Mas se de fato você quer remover o iframe:

$(function(){
     $("#id_do_botao_fechar_fora_do_iframe").click(function() {
          $("#nav").empty();
     });
});

Assim ele vai remover tudo que esta dentro da tag com id "nav".

2
  • como crio o botão?
    – Tmc
    Commented 11/09/2017 às 13:16
  • Pode clicar uma div ou img o importante é só colocar o id no elemento ex: <div id="id_do_botao_fechar">Fechar</div> ou <a href="#" id="id_do_botao_fechar">Fechar</a> Commented 11/09/2017 às 13:28
0

Com a ajuda e resposta do @AndersonCarlosWoss consegui chegar a este resultado:

function closeiframe() {
  document.getElementById("nav").style.display = "none";
}

function openiframe() {
	document.getElementById("nav").style.display = "inherit";
}
.iframe {
  osition: relative;
}

.iframe button {
  position: absolute;
	right: 10px;
	top: 10px;
	color: red;
}
<div class="gallery">
  <a target="iframe1" href="https://pt.wikipedia.org/wiki/Wikipédia:Página_principal" onclick="openiframe()">
    <img src="images\test1.png" alt="test1" width="300" height="200">
  </a>
  <div class="desc">test1</div>
</div>

<div class="gallery">
  <a target="iframe1" href="https://pt.wikipedia.org/wiki/Wikipédia:Boas-vindas" onclick="openiframe()">
    <img src="images\test2.png" alt="test2" width="300" height="200">
  </a>
  <div class="desc">test2</div>
</div>

<div id="nav">
	<iframe name='iframe1' id='link' width="800" height='500' style="border:none;"></iframe>
	<button onclick="closeiframe()">X</button>
</div> 

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .