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

这大致分为三个部分：

打开子窗口时，将整页iframe放在父窗口的顶部。 This answer has an explanation and example（使用jQuery;我注意到你在问题中使用了jQuery）。
点击子窗口上的iframe来电focus。
在子窗口的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。

Window.open（）作为模态弹出行为

1 个答案: