1

我试图在打开子窗口后立即禁用父窗口。每当打开弹出窗口时，我想使父窗口变灰。

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

<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 上看到了其他各种帖子，但我无法理解如何将这些内容合并到我的代码中。我正在尝试做这样的事情。

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

4

2 回答 2

1

使用 iframe 支持从这个问题的答案更新小提琴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
}
于 2013-07-27T21:58:01.497 回答
0

您给出的示例没有使用新浏览器窗口意义上的弹出窗口，而是使用div加载新内容的现有页面上的弹出窗口。这种方法是可行的，因为您将使用 Ajax 调用来填充您的弹出窗口。通过对第二页使用 Ajax 调用，您可以判断请求何时完成，并根据需要淡出背景。如果你真的想要，你可以使用iFrame，并检查它何时加载，但在我看来，这种方法不是那么好。

使用 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必须位于 our 下方#popup-window，因此我们使用该z-index属性来确保这一点。

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

于 2013-07-27T21:58:49.403 回答