当前位置： 文江博客话题详情

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

发布于 2024-11-01 09:44:28 字数 349 浏览 4 评论 0原文

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

function popup()
{

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

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

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

也请建议跨浏览器兼容的代码..

原文

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

Also please suggest the code which will be cross-browser compatible..

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（5）

江城子 2024-11-08 09:44:28
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>

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 onFocus="parent_disable();" onclick="parent_disable();">

As you requested here is the complete html code of the parent window

<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

<html>
<body>
I am child
</body>
</html>
回复 原文
世俗缘 2024-11-08 09:44:28

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

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

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

To my knowledge, you cannot disable the browser window.

What you can do is create a jQuery (or a similar kind of ) popup and when this popup appears your parent browser will be disabled.

Open your child page in popup.

回复 原文
吾家有女初长成 2024-11-08 09:44:28

这就是我最终做到的！您可以在身体上放置一层（全尺寸），具有高 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";
   }

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

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.

      .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 :-)

回复 原文
狼亦尘 2024-11-08 09:44:28

关键术语是模态对话框。

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

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

The key term is modal-dialog.

As such there is no built in modal-dialog offered.

But you can use many others available e.g. this

回复 原文
走过海棠暮 2024-11-08 09:44:28

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

Hi the answer that @anu posted is right, but it wont completely work as required. By making a slight change to child_open() function it works properly.

<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>
回复 原文
~没有更多了~

关于作者

花落人断肠

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

╭⌒浅淡时光〆

文章 0 评论 0

慕巷

文章 0 评论 0

浅生活

文章 0 评论 0

bal

文章 0 评论 0

lqwuliang

文章 0 评论 0

后来的我们

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文