im looking to close an iframe on document click after its been opened by a button ive tried stoppropagation but still nothing i created a fiddle so its more understandable, in my actual project it wont open the iframe at all when i have both events at the same time so just wondering if theres a way it can open the iframe on button click first then when the main site is clicked it closes. In the fiddle the document is represented by the main-container in blue, Thanks!
https://jsfiddle.net/yadodevs/ma3jyug0/2/
<div class="main-container" onclick="closeframe">
<iframe src="https://yh.io/" frameborder="" id="framed" class="framed">
</iframe>
<button onclick="myFunction()">
Click me
</button>
</div>
.framed{
display:none;
}
.main-container{
background-color:blue;
width:600px;
height:300px;
}
function myFunction() {
var x = document.getElementById("framed");
if (x.style.display="none"){
(x.style.display="block");
}
else {(x.style.display="none")
}
}
function closeframe() {
var x = document.getElementById("framed");
(x.style.display==="none");
}
