I'm working on an application with modal overlays that appear within iFrames when the corresponding buttons are pressed. To close one of these modal overlays, the Cancel button is defined in the parent window this way:
<a href="#close" class="modalButton">Cancel</a>
I'd like to replace this with a JavaScript function (let's call it onCancel() ) so I can reset some values if needed in addition to closing the overlay. What is the JavaScript equivalent to "#close"?
You can't close an iFrame, you either have to remove or hide it. The example below removes the iframe
. If you just want to hide you can replace the last line (containing removeChild
with this one frame.style.display="none";
You can then get it back by using this line frame.style.display="block";
<!DOCTYPE html>
<head>
<title>test</title>
<style type="text/css">
.top {
height: 100px;
width: 200px;
background-color: blue;
}
</style>
<script type="text/javascript">
function removeIFrame() {
var frame = document.getElementById("iframe");
frame.parentNode.removeChild(frame);
}
</script>
</head>
<body>
<div class="top" onclick="removeIFrame();"></div>
<iframe id="iframe" src="/" width="200" height="100"></iframe>
<div class="top"></div>
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With