用Javascript打开弹出式窗口并禁用父窗口

Question

用Javascript打开弹出式窗口并禁用父窗口

24

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

function popup()
{

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

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

同样地，我正在寻找类似于使用showModalDialog()时所得到的东西...也就是它根本不允许选择父窗口..唯一的问题是我想要使用window.open来完成相同的事情

请还提供跨浏览器兼容的代码。

- copenndthagen

你是什么意思说“禁用父窗口”？ - atlavis

禁用意味着不允许用户选择父窗口上的文本，事实上不允许他选择父窗口上的任何内容。 - copenndthagen

1

你可以参考下面的链接：https://dev59.com/HWDVa4cB1Zd3GeqPfq1g - Kishore Kumar

5个回答

2

这就是我最终实现的方法！您可以在身体上加一层 (全尺寸) ，并设置高 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;
  }

并在body中添加层：

                <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";
   }

我希望这可以帮助你 :-）

- MehdiK

2

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

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

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

- niksvp

我知道jQuery模态对话框..但我不能使用它..它实际上是同一页内的一个div。 - copenndthagen

@hmthur - 如果您不想让它在同一页中显示，那么您可以在该div中使用iframe，并将您想要查看的页面放在iframe的src属性中。 - niksvp

1

关键词是模态对话框。

因此，没有内置的模态对话框可供使用。

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

- Jatin Dhoot

0

嗨，@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>

- Sachin J

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Anupam · Accepted Answer

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>