Question

这是我的父页面，我正在打开一个弹出窗口

<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的功能，但是我无法关闭弹出窗口，有人帮忙吗？

或任何人都有更好的解决方案或示例来做这样的弹出窗口？

任何帮助高度赞赏

Answer 1

您的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
}

Answer 2

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

此外，还有很多jQuery插件可用于显示fancy box，color box等弹出窗口

如何在HTML中关闭iframe弹出窗口

2 个答案: