Question

我打算在子窗口打开后立即禁用父窗口。我想在打开弹出窗口时使父窗口变灰。

下面是我的弹出窗口代码 -

<html>
<head>
    <title>Applying</title>
</head>
<body>

<script>
function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, 
        function(m,key,value) {
            vars[key] = value;
        });
    return vars;
}
var variable1 = getUrlVars()["parameter1"];    

var myScript = document.createElement('script');

myScript.setAttribute('type', 'text/javascript');
myScript.setAttribute('urlId', '420');
myScript.setAttribute('dataTitle', variable1);
myScript.setAttribute('dataemail', 'admin@domain.net');

document.body.appendChild(myScript);                              
</script>

<input name="Apply" type="button" id="Apply" value="Apply" ONCLICK="window.location.href='some_url'">
</body>
</html>

以下是我的父窗口代码 -

<html>

<body>
<SCRIPT LANGUAGE="JavaScript">
<!-- 
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=550,height=650,left = 570,top = 300');");
}
</script>
<input type=button value="Apply" onClick="javascript:popUp('popup_window_url')">
</body>
</html>

在这里禁用父窗口的最佳方法是什么？使用上述代码的任何示例都将帮助我理解一个简单的示例。

我在stackoverflow上看到了其他各种帖子，但我无法理解如何在我的代码中包含这些内容。我正在尝试做this之类的事情。

任何建议都会有很大的帮助。

Answer 1

使用iframe支持this

，在http://jsfiddle.net/LT5JC/问题的答案中更新了小提示

开放功能相当简单

function open(url) {
    $('#block').fadeIn(); // show grayed pane
    $('#iframe').attr('src', url); // update src of iframe
    $('#container').fadeIn(); // show container with iframe
}

Answer 2

您提供的示例在新浏览器窗口的意义上不使用弹出，而是在加载新内容的现有页面上使用div。这种方法是可行的，因为您将使用Ajax调用来填充弹出窗口。通过对第二页使用Ajax调用，您可以告知请求何时完成，并根据需要淡出背景。如果你真的想，你可以使用iFrame, and check when that's loaded，但在我看来这种方法并不是很好。

使用jQuery的简单实现：

var cover = $("<div id='cover'></div>");
var content = $("#content"),
    popup_window = $("#popup-window"),
    popup_launcher = $("#popup-launch");

// When we click a button, load our new content into our popup
// and fade the window in once the request has completed. Also,
// fade our cover in, thus restricting the user from clicking the content beneath
popup_launcher.on("click", function() {
    popup_window.load(child_url, function() {
        popup_window.fadeIn();
        content.fadeIn(cover);
    });
});
// When a close button is clicked inside the popup window, fade it out.
popup_window.on("click", ".close", function() {
    popup_window.fadeOut();
    cover.fadeOut();
});

<强> CSS

#cover {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:2;
    display:none;
    background:RGBA(0,0,0,0.5);
}
#popup-window {
    position:fixed;
    left:30%;
    right:30%;
    top:30%;
    bottom:30%;
    z-index:3;
}

非常简单的示例，但我们的#cover必须位于#popup-window下方，因此我们使用z-index属性来确保这一点。

编辑 - 虽然Ajax方法会更好，但请记住，由于HTTP access control，您只能在同一个域上请求网页（通常），所以如果你需要打开外部资源，你可能需要使用iFrame解决方案。

打开弹出窗口后立即显示灰色并禁用父窗口

2 个答案: