Javascript打开弹出窗口并禁用父窗口答案

【问题标题】：Javascript to open popup window and disable parent windowJavascript打开弹出窗口并禁用父窗口
【发布时间】：2011-08-05 08:46:18
【问题描述】：

我想打开一个弹出窗口并禁用父窗口。以下是我正在使用的代码；

function popup()
{

    popupWindow = window.open('child_page.html','name','width=200,height=200');
    popupWindow.focus();
}

由于某种原因，父窗口没有被禁用。我需要一些额外的代码或者是什么情况？

再次，我正在寻找类似于我们使用 showModalDialog() 时得到的东西......即它根本不允许选择父窗口。唯一的事情是我想使用 window.open 完成同样的事情

另外请建议将跨浏览器兼容的代码..

【问题讨论】：

“禁用父窗口”是什么意思？
禁用意味着不允许用户在父窗口上选择说文本..实际上不允许他在父窗口上选择任何内容..
您也可以参考以下链接。 stackoverflow.com/questions/9376102/…

标签： javascript popup

【解决方案1】：

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>

【讨论】：

我在 IE 中试过这个。但它允许我选择或玩父窗口。
你可以选择父窗口是什么意思，因为对我来说它工作正常。它不允许你对父窗口执行任何操作
对我来说，我可以在孩子打开时对父母执行操作..您能复制/粘贴您拥有的完整 HTML 代码吗..
我已经用两个窗口的完整 html 代码编辑了我的答案。
我按原样复制粘贴了您提供的代码..仍然当我打开弹出窗口时，我可以在父级中选择文本..我在 IE8 中测试过...不确定是否有沟通差距，但我正在寻找的正是我们使用 showModalDialog()..ie 时得到的东西它根本不允许选择父窗口。唯一的事情是我想使用 window.open 获得相同的东西...

【解决方案2】：

据我所知，您无法禁用浏览器窗口。

您可以做的是创建一个jQuery（或类似类型的）弹出窗口，当此弹出窗口出现时，您的父浏览器将被禁用。

在弹出窗口中打开您的子页面。

【讨论】：

我知道 jQuery 模态对话框..但我不能使用它..它实际上是同一页面中的一个 div..
@hmthur - 如果您不希望它出现在同一页面中，那么您可以在该 div 中使用iframe 并在src 的src 属性中提供您想要查看的页面@

【解决方案3】：

我终于做到了！您可以在您的身体上放置一个具有高 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";
   }

我希望它会有所帮助:-)

【讨论】：

【解决方案4】：

关键词是模态对话。

因此没有提供内置的模式对话框。

但是您可以使用许多其他可用的，例如this

【讨论】：

【解决方案5】：

您好@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>

【讨论】：