Window.open() 作为模式弹出行为

Question

由于 window.showmodaldialog 在 chrome 中已贬值，所以我改用 window.open()。但问题是，在打开子窗口后，我希望我的父窗口被禁用，如果我点击父窗口，它应该专注于子窗口。

我尝试了一些 body 属性，例如 onmouseover、onclick 事件，它在某种程度上是有效的，但是如果父级上有任何按钮并且如果我单击其相应的事件就会被调用。

现在我在打开子窗口时禁用父窗口事件，如下所示。

$('body').css({ 'opacity': 0.3, 'pointer-events': 'none' })

并在关闭子窗口后恢复

 $('body').css({ 'opacity': 1, 'pointer-events': 'auto' });

现在我的问题是当我点击父窗口时，我如何才能专注于孩子？

Answer 1

这大致分为三个部分：

1. 当您打开子窗口时，在父窗口顶部放置一个整页iframe。 This answer has an explanation and example（使用 jQuery；我注意到您在问题中使用的是 jQuery）。

2. 点击子窗口上的iframe 调用focus。

3. 在子窗口的unload 上，删除iframe。

以防万一其他答案因任何原因消失，这是其中的示例：

HTML：

<input type='button' id='btnPopup' value='Click for Pop-Up'>
<p>This is text on the page</p>
<p>This is text on the page</p>
<p>This is text on the page</p>
<p>This is text on the page</p>
<p>This is text on the page</p>

JavaScript：

jQuery(function($) {
  $('#btnPopup').click(function() {
    $("<iframe id='shim' src='http://output.jsbin.com/abira4/1'>").css({
      width: "100%",
      height: "100%",
      position: "absolute",
      left: "0px",
      top: "0px",
      zIndex: "100",
      backgroundColor: "#fff",
      opacity: "0.5"
    }).appendTo(document.body);
    $("<div>Hi there, click me to dismiss</div>").css({
      zIndex: "101",
      border: "1px solid black",
      backgroundColor: "#ecc",
      position: "absolute",
      left: "100px",
      top: "100px"
    }).appendTo(document.body)
      .click(function() {
        $(this).remove();
        $("#shim").remove();
      });
  });
});

（http://output.jsbin.com/abira4/1 只是一个空白页。）

Live Example - 同样，这只是上面的 #1，您需要添加 #2 和 #3。