Javascript 模式弹出窗口显示外部内容

Question

我正在尝试实现一个模式弹出窗口。基本要求是我需要在弹出窗口中显示外部页面，并且弹出窗口必须是模态页面。

我按照这篇文章尝试了一个实现 http://www.aspsnippets.com/Articles/JavaScript-windowopen-Display-Modal-Popup-Window.aspx

我的实现可以在这里看到:http://jsfiddle.net/geekays/8txau4v9/

JavaScript 代码在这里:

var popUpObj;

function showModalPopUp() {
    popUpObj = window.open("http://www.geekays.net/",
        "ModalPopUp",
        "toolbar=no," +
        "scrollbars=no," +
        "location=no," +
        "statusbar=no," +
        "menubar=no," +
        "resizable=0," +
        "width=950," +
        "height=600," +
        "left = 490," +
        "top=300");
    LoadModalDiv();
    popUpObj.focus();
}

function LoadModalDiv() {
    var bcgDiv = document.getElementById("divBackground");
    bcgDiv.style.display = "block";
}

//To be called when the pop-up is closed. But how??
function HideModalDiv() {
    var bcgDiv = document.getElementById("divBackground");
    bcgDiv.style.display = "none";
}

HTML 看起来像这样:

<div id="divBackground" style="position: fixed; z-index: 999; height: 100%; width: 100%; top: 0; left:0; background-color: Black; filter: alpha(opacity=60); opacity: 0.6; -moz-opacity: 0.8;display:none"></div>
<div>
    Link is here: <a href="#" onclick="showModalPopUp();">Click Here</a>
</div>

但它没有按预期工作。主要问题是我无法调用弹出窗口的关闭操作，因为内容是外部的。

我还尝试使用带有 IFrame 的本地页面来加载外部页面。但是使用 IFrame 会导致 IE 显示安全警告，这是不受欢迎的。我想避免安全警告。可以使用 IE 设置来抑制该警告，但我有大量用户，他们可能都不喜欢更改 IE 中的默认设置。

Answer 1

您可以添加一个事件监听器，以确保当窗口获得焦点时模态 div 被隐藏。将以下行添加到您的代码中:

window.addEventListener("focus", function(event) { HideModalDiv(); }, false);

这样，一旦弹出窗口关闭，父窗口将重新获得焦点。

就我个人而言，我还会尝试探索在 div 中嵌入 iFrame，并使用 CSS 创建类似模态的效果，但这可能是一个不同的故事。欲了解更多信息，您可以查看this question .