我想打开一个弹出窗口并禁用父窗口。以下是我正在使用的代码；
function popup()
{
popupWindow = window.open('child_page.html','name','width=200,height=200');
popupWindow.focus();
}
出于某种原因，父窗口不会被禁用。我是否需要一些额外的代码或者是什么情况？
再次，我正在寻找类似于我们使用 showModalDialog() 时得到的东西..即它根本不允许选择父窗口..唯一的事情是我想使用 window.open 完成同样的事情
还请建议将跨浏览器兼容的代码..
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();
}
然后在父窗口的body标签中声明这些函数
<body onFocus="parent_disable();" onclick="parent_disable();">
正如您所要求的，这是父窗口的完整 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>
下面是new.jsp的内容
<html>
<body>
I am child
</body>
</html>
这就是我最终做到的！您可以在您的身体上放置一个具有高 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;
}
并在身体中分层：
<div class="layout" id="layout"></div>
打开弹出窗口的函数：
var new_window;
function winOpen(){
$(".layer").show();
new_window=window.open(srcurl,'','height=750,width=700,left=300,top=200');
}
保持新窗口聚焦：
$(document).ready(function(){
$(".layout").click(function(e) {
new_window.focus();
}
});
并在打开的窗口中：
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";
}
我希望它会有所帮助:-)
嗨，@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>