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

Question

由于 window.showmodaldialog 在 chrome 中已被贬值，所以我使用 window.open() 代替。但问题是，打开子窗口后，我希望禁用父窗口，如果我单击父窗口，它应该聚焦于子窗口。

我尝试使用一些主体属性，例如 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. 在子窗口卸载时，删除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。