Javascript Javascript打开弹出窗口并禁用父窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5660700/
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
Javascript to open popup window and disable parent window
提问by testndtv
I want to open a popup window and disable the parent window. Below is the code that I am using;
我想打开一个弹出窗口并禁用父窗口。以下是我正在使用的代码；
function popup()
{
popupWindow = window.open('child_page.html','name','width=200,height=200');
popupWindow.focus();
}
For some reason, the parent window does not get disabled. Do I need some additional code OR what is the case?
出于某种原因，父窗口不会被禁用。我是否需要一些额外的代码或者是什么情况？
Again, I am looking for something similar to what we get when we use showModalDialog()..i.e. it does not allow to select parent window at all..Only thing is I want to get the same thing done using window.open
再次，我正在寻找类似于我们使用 showModalDialog() 时得到的东西..即它根本不允许选择父窗口..唯一的事情是我想使用 window.open 完成同样的事情
Also please suggest the code which will be cross-browser compatible..
还请建议将跨浏览器兼容的代码..
回答by anupam
var popupWindow=null;
function popup()
{
popupWindow = window.open('child_page.html','name','width=200,height=200');
}
function parent_disable() {
if(popupWindow && !popupWindow.closed)
popupWindow.focus();
}
and then declare these functions in the body tag of parent window
然后在父窗口的body标签中声明这些函数
<body onFocus="parent_disable();" onclick="parent_disable();">
As you requested here is the complete html code of the parent window
正如您所要求的，这是父窗口的完整 html 代码
<html>
<head>
<script type="text/javascript">
var popupWindow=null;
function child_open()
{
popupWindow =window.open('new.jsp',"_blank","directories=no, status=no, menubar=no, scrollbars=yes, resizable=no,width=600, height=280,top=200,left=200");
}
function parent_disable() {
if(popupWindow && !popupWindow.closed)
popupWindow.focus();
}
</script>
</head>
<body onFocus="parent_disable();" onclick="parent_disable();">
<a href="javascript:child_open()">Click me</a>
</body>
</html>
Content of new.jsp below
下面是new.jsp的内容
<html>
<body>
I am child
</body>
</html>
回答by niksvp
回答by Jatin Dhoot
回答by MehdiK
This is how I finally did it! You can put a layer (full sized) over your body with high z-index and, of course hidden. You will make it visible when the window is open, make it focused on click over parent window (the layer), and finally will disappear it when the opened window is closed or submitted or whatever.
这就是我最终做到的！您可以在您的身体上放置一个具有高 z-index 的图层（全尺寸），当然也可以隐藏。您将在窗口打开时使其可见，使其专注于单击父窗口（图层），最后在打开的窗口关闭或提交或其他任何时候将其消失。
.layer
{
position: fixed;
opacity: 0.7;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 999999;
background-color: #BEBEBE;
display: none;
cursor: not-allowed;
}
and layer in the body:
并在身体中分层：
<div class="layout" id="layout"></div>
function that opens the popup window:
打开弹出窗口的函数：
var new_window;
function winOpen(){
$(".layer").show();
new_window=window.open(srcurl,'','height=750,width=700,left=300,top=200');
}
keeping new window focused:
保持新窗口聚焦：
$(document).ready(function(){
$(".layout").click(function(e) {
new_window.focus();
}
});
and in the opened window:
并在打开的窗口中：
function submit(){
var doc = window.opener.document,
doc.getElementById("layer").style.display="none";
window.close();
}
window.onbeforeunload = function(){
var doc = window.opener.document;
doc.getElementById("layout").style.display="none";
}
I hope it would help :-)
我希望它会有所帮助:-)
回答by Sachin J
Hi the answer that @anu posted is right, but it wont completely work as required. By making a slight change to child_open() functionit works properly.
嗨，@anu 发布的答案是正确的，但它不会完全按要求工作。通过对child_open() 函数进行轻微更改，它可以正常工作。
<html>
<head>
<script type="text/javascript">
var popupWindow=null;
function child_open()
{
if(popupWindow && !popupWindow.closed)
popupWindow.focus();
else
popupWindow =window.open('new.jsp',"_blank","directories=no, status=no, menubar=no, scrollbars=yes, resizable=no,width=600, height=280,top=200,left=200");
}
function parent_disable() {
if(popupWindow && !popupWindow.closed)
popupWindow.focus();
}
</script>
</head>
<body onFocus="parent_disable();" onclick="parent_disable();">
<a href="javascript:child_open()">Click me</a>
</body>
</html>
