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。

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

1 个答案: