JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<body>
<div id="box">
    <a href="javascript:show();" >Link</a>
</div>
<div id="box2">    
    <iframe src="" id="frame" width=100% height=100%></iframe>
    <div id="close"><input type="button" onclick="closeIframe()" value="X" /></div>
</div>
</body>

CSS

iframe
{
    //visibility:hidden;
}
#box
{  
    background-color:yellow;
}
#box2
{
    position:absolute;
    top:7px;
    visibility:hidden;
}
#close
{
     position:relative;
     left:100%;
     width:50px;
     top:-160px;
}

JavaScript

function show()
{
   box= document.getElementById("box");
   box.style.visibility="hidden";
    
   box2=document.getElementById("box2");
   box2.style.visibility="visible";
}

function closeIframe()
{
    box2=document.getElementById("box2");
    box2.style.visibility="hidden";
    box= document.getElementById("box");
    box.style.visibility="visible";
}