Window.open() als modales Popup-Verhalten

Question

Da window.showmodaldialog in Chrom abgeschrieben wird, verwende ich stattdessen window.open(). Aber das Problem ist, dass nach dem Öffnen des untergeordneten Fensters ich möchte, dass mein übergeordnetes Fenster deaktiviert wird, und wenn ich auf übergeordnetes Fenster klicke, sollte es sich auf untergeordnetes Fenster konzentrieren.

Ich versuchte mit einigen Körperattributen wie onmouseover, onclick Ereignisse, die es in gewissem Maße funktioniert, aber wenn es irgendeine Schaltfläche auf Eltern gibt und wenn ich klicke, wird sein jeweiliges Ereignis aufgerufen.

Momentan deaktiviere ich die Elternfenster-Ereignisse wie unten, wenn ich Kind-Fenster öffne.

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

und nach Fenster

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

Nun meine Frage wieder aufnehmen Kind zu schließen, wenn ich auf Elternfenster klicken, wie kann es auf Kind konzentrieren?

Answer 1

Es gibt ungefähr drei Teile dieses:

1. Wenn Sie das Kind Fenster zu öffnen, stellen eine ganzseitige iframe oben auf dem übergeordneten Fenster. This answer has an explanation and example (mit jQuery; ich beachte, dass Sie jQuery in der Frage verwenden).

2. Klicken Sie auf diese iframe Anruf focus auf dem untergeordneten Fenster.

3. Unter unload des untergeordneten Fensters das iframe entfernen.

Nur für den Fall, dass andere Antwort aus irgendeinem Grund verschwunden, hier ist das Beispiel darin:

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 ist nur eine leere Seite.)

Live Example - Noch einmal, dies ist nur # 1 der oben genannten, müssen Sie # 2 und # 3 hinzufügen.