How to create a button inside an iframe to close it

Question

I needed to create a button inside a iframe in a corner to close it. I have an image gallery and clicking on an image will open a iframe, the following code already does this.

But now I needed to create a button in a corner inside the iframe (preference in the upper right corner) when pressing the button would have to close the iframe. Mind the pages I’ll open by iframe I don’t have access to the code. And After closing the iframe through the button it should be possible to reopen it by clicking on the image gallery.

Any idea how I can do it?

I have the following code already made:

<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> 

Answer 1

If the function of the button is just to hide the iframe, I don’t see why you insert it into it; you can create the button on your page and just position it on the iframe, in the desired position. Take an example:

.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>

Realize that the button is set on your own page, no need to define it within the iframe.

Answer 2

With the help and response of @Andersoncarloswoss I managed to reach this result:

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://en.wikipedia.org/wiki/Main_Page" 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://en.wikipedia.org/wiki/Wikipedia:Welcoming_committee/Welcome_to_Wikipedia" 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> 

Answer 3

This code needs to use jquery.

If iframe cannot cease to exist, then on the page you call in iframe do the button and put the id of the element you want to remove this way:

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

But if in fact you want to remove iframe:

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

So it will remove everything inside the tag with id "Nav".