javascript 弹出窗口打开后立即将父窗口变灰并禁用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17902409/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Gray and disable out the parent window as soon as pop up window is opened
提问by
I am trying to disable the Parent window as soon as the child window is opened. I would like to gray out the parent window whenever pop window is opened.
我试图在子窗口打开后立即禁用父窗口。每当打开弹出窗口时，我都想让父窗口变灰。
Below is my popup window code-
下面是我的弹出窗口代码-
<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', '[email protected]');
document.body.appendChild(myScript);
</script>
<input name="Apply" type="button" id="Apply" value="Apply" ONCLICK="window.location.href='some_url'">
</body>
</html>
Below is my Parent window code-
下面是我的父窗口代码-
<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>
What's the best and easy way to disable the parent window here? Any example with my above code will help me a lot in understanding a simple example.
在这里禁用父窗口的最佳和简单方法是什么？上面代码的任何示例都将帮助我理解一个简单的示例。
I saw various other post on the stackoverflow but I am not able to understand how to incorporate those things here in my code. I am trying to do something like this.
我在 stackoverflow 上看到了各种其他帖子，但我无法理解如何将这些内容合并到我的代码中。我试图做类似这样。
Any suggestions will be of great help.
任何建议都会有很大帮助。
采纳答案by twil
Updated fiddle from answer in thisquestion with iframe support http://jsfiddle.net/LT5JC/
从这个问题的答案更新小提琴与 iframe 支持http://jsfiddle.net/LT5JC/
Open function is rather simple
open函数比较简单
function open(url) {
$('#block').fadeIn(); // show grayed pane
$('#iframe').attr('src', url); // update src of iframe
$('#container').fadeIn(); // show container with iframe
}
回答by Ian Clark
The example you gave doesn't use a popupin the sense of a new browser window, but a divon the existing page onto which the new content is loaded. This method is possible, as you would use an Ajax call to populate your popup. By using an Ajax call to the second page, you are able to tell when the request has finished, and fade the background out as required. If you really want to, you could use an iFrame, and check when that's loaded, but in my opinion this method isn't as nice.
您提供的示例没有使用新浏览器窗口意义上的弹出窗口，而是使用div加载新内容的现有页面上的弹出窗口。这种方法是可行的，因为您将使用 Ajax 调用来填充弹出窗口。通过对第二个页面使用 Ajax 调用，您可以判断请求何时完成，并根据需要淡出背景。如果你真的想要，你可以使用iFrame，并检查它的加载时间，但在我看来，这种方法不是很好。
A simple implementation using jQuery:
使用 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
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;
}
Very simple example, but our #coverhas to be positioned beneath our #popup-window, so we use the z-indexproperty to ensure this.
非常简单的例子，但 our#cover必须位于 our 之下#popup-window，所以我们使用z-index属性来确保这一点。
Edit- whilst the Ajax method would be nicer, bear in mind that due to HTTP access control, you'll only be able to request pages on the same domain(generally), so if you need to open external resources, you'll probably need to use an iFrame solution.
编辑- 虽然 Ajax 方法会更好，但请记住，由于HTTP 访问控制，您只能请求同一域中的页面（通常），因此如果您需要打开外部资源，您可能会需要使用 iFrame 解决方案。
