显示外部内容的 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。