javascript 如何在 html 中关闭 iframe 弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12382769/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to close iframe popup in html
提问by Arti Patel
this is my parent page, from where i'm opening a popup
这是我的父页面，我从中打开一个弹出窗口
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Popup example</title>
<script type="text/javascript">
function OpenPop() {
window.scrollTo(0, 0);
var width = document.documentElement.clientWidth + document.documentElement.scrollLeft;
var height = document.documentElement.clientHeight + document.documentElement.scrollTop;
var layer = document.createElement("div");
layer.style.zIndex = 2;
layer.id = "layer";
layer.style.position = "absolute";
layer.style.top = "0px";
layer.style.left = "0px";
layer.style.height = document.documentElement.scrollHeight + "px";
layer.style.width = width + "px";
layer.style.backgroundColor = "black";
layer.style.opacity = "0.75";
layer.style.filter += ("progid:DXImageTransform.Microsoft.Alpha(opacity=75)");
document.body.style.position = "static";
document.body.appendChild(layer);
var size = { "height": 220, "width": 400 };
var iframe = document.createElement("iframe");
var popUrl = 'popup.htm';
iframe.name = "Logic Form";
iframe.id = "popup";
iframe.src = popUrl;
iframe.style.height = size.height + "px";
iframe.style.width = size.width + "px";
iframe.style.position = "fixed";
iframe.style.zIndex = 3;
iframe.style.backgroundColor = "white";
iframe.frameborder = "0";
iframe.style.top = ((height + document.documentElement.scrollTop) / 2) - (size.height / 2) + "px";
iframe.style.left = (width / 2) - (size.width / 2) + "px";
document.body.appendChild(iframe);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<a onclick="OpenPop();" href="#">OpenPopup</a>
</div>
</form>
</body>
and this is my popup.html page,
这是我的 popup.html 页面，
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function closeIframe() {
var iframe = opener.document.getElementById("popup");
var layer = opener.document.getElementById("layer");
iframe.parentNode.removeChild(iframe);
layer.parentNode.removeChild(layer);
}
</script>
</head>
<body>
<h3>This is Popup</h3>
<a onclick="closeIframe();" href="#">Close</a>
</body>
</html>
problem : on popup.html , there is close button, who is calling function to remove iframe, but i am not able to close popup, anybody help?
问题：在 popup.html 上，有关闭按钮，谁在调用删除 iframe 的函数，但我无法关闭弹出窗口，有人帮忙吗？
ORanybody have better solution or example to do popup like this?
或者有人有更好的解决方案或示例来做这样的弹出窗口吗？
any help highly appreciated
任何帮助高度赞赏
采纳答案by balexandre
Your CloseIframemethod should be:
你的CloseIframe方法应该是：
function closeIframe() {
window.parent.ClosePop();
}
and in your main page, right under OpenPopmethod, add the close action, like:
并在您的主页中，在OpenPop方法的正下方，添加关闭操作，例如：
function ClosePop() {
var layer = document.getElementById("layer");
var iframe = document.getElementById("popup");
document.body.removeChild(layer); // remove layer
document.body.removeChild(iframe); // remove div
}
回答by Murali Murugesan
You can use jQuery UI dialogbox for showing modal popup window. It will be easy to handle.
您可以使用jQuery UI 对话框来显示模式弹出窗口。这将很容易处理。
Also there are lots of jQuery plugins available for showing popup like fancy box, color box, etc
