モーダルポップアップ動作としてのWindow.open（）

Question

window.showmodaldialogはクロムで償却されるため、代わりに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を追加する必要があります。