如何关闭html中的iframe弹出窗口

how to close iframe popup in html

本文关键字：窗口 iframe 中的何关闭 html 更新时间：2023-09-26

这是我的父页面，我从那里打开一个弹出

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

这是我的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>

问题：在popup.html上，有一个关闭按钮，谁在调用函数来删除iframe，但我无法关闭popup，有人帮忙吗？

或有人有更好的解决方案或例子来做这样的弹出窗口吗？

任何帮助都非常感谢

您的CloseIframe方法应该是：

function closeIframe() {
    window.parent.ClosePop();
}

在您的主页中，就在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
}

您可以使用jQuery UI对话框来显示模式弹出窗口。它将很容易处理。

此外，还有许多jQuery插件可用于显示弹出窗口，如花式框、颜色框等。