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. 在子窗口的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。