In jquery UI-Dialog ist es möglich, einen modalen Dialog über einen anderen modalen Dialog setzen

Question

Ich habe einen modalen Dialog mit jquery UI-Dialog. Ich möchte nun einen weiteren Dialog öffnen, wenn ich im ersten Dialog ein Feld ändere. Beide sollten modal sein.

Ist dies möglich, als ich versuchte, diesen Code dort zu setzen und nichts scheint zu Popup. Der folgende Code funktioniert einwandfrei, wenn Sie auf eine reguläre Seite klicken (wo das Select-Steuerelement mit der ID: selectDropdownThatICanChange), aber wenn das select select-Steuerelement, das ich verändere, selbst ein Dialogfeld ist, führt die Dialogzeile ("Open") nichts aus. Das Änderungsereignis wird ausgelöst und die offene Methode wird aufgerufen, aber es wird nichts angezeigt.

$("#secondModalDialog").dialog({ 
    resizable: false, 
    height: 'auto', 
    autoOpen: false, 
    title: "Warning", 
    width: 400, 
    modal: true, 
    buttons: { 
     'Close': function() { 
      $("#secondModalDialog").dialog('close'); 
     } 
    } 
}); 


$('#selectDropdownThatICanChange').live("change", function() { 
    $("#secondModalDialog").dialog('open'); 
}); 

und hier ist der Dialog (die nur ein div ist)

<div id="secondModalDialog" style="display:none"> 
     This is a test <br/> This is atest 
</div> 

Answer 1

UI Dialoge Singletons sind nicht können Sie so viele Dialoge öffnen, wie Sie möchten. Und standardmäßig sind sie gestapelt. Aber wenn Dialog sich konzentriert, kommt es vor anderen Dialogen auf.

Hier ist Geige, die ich für Sie erstellt habe. Open dialog from first dialog

// HTML: 
<div id="dialog-modal" title="Basic modal dialog"> 
    Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content. 
    <select id="dialogSelect"> 
     <option>123</option> 
     <option>234</option>  
    </select> 
</div> 
<div id="another-dialog-modal" title="2nd Modal :O"> 
    Second Modal yayyay 
</div> 

// JS: 
$("#dialog-modal").dialog({ 
    height: 300, 
    modal: true, 
    buttons: { 
     Cancel: function() { 
      $(this).dialog('close'); 
     } 
    } 
}); 
$("#dialogSelect").change(function(){ 
    $("#another-dialog-modal").dialog('open'); 
}); 
$("#another-dialog-modal").dialog({ 
    autoOpen: false, 
    modal: true, 
    buttons: { 
     Cancel: function() { 
      $(this).dialog('close'); 
     } 
    } 
}); 

Ich habe auf den ersten Dialog setzen Dropdown und auf Änderungsereignis öffnete ich einen weiteren Dialog über dem ersten Dialog.

Answer 2

Wie sushanth reddy in den Kommentaren angegeben, stellen Sie den Z-Index des Dialogs:

$("#secondModalDialog").dialog({ 
    resizable: false, 
    height: 'auto', 
    autoOpen: false, 
    title: "Warning", 
    width: 400, 
    modal: true, 
    zindex: 1001, // Default is 1000 
    buttons: { 
     'Close': function() { 
      $("#secondModalDialog").dialog('close'); 
     } 
    } 
}); 

Referenz : http://docs.jquery.com/UI/API/1.8/Dialog#option-zIndex

Answer 3

Sie können eine beliebige Anzahl von Modalitäten und das Standardverhalten öffnen oder stapelt in der Reihenfolge, in der sie geöffnet wurden.

Demo: jsFiddle

$('#dialog-modal').dialog({ 
    height: 300, 
    modal: true, 
    buttons: { 
     'Another Modal': function() { 
      $('#another-dialog-modal').dialog('open'); 
     }, 
     Cancel: function() { 
      $(this).dialog('close'); 
     } 
    } 
}); 

$('#another-dialog-modal').dialog({ 
    autoOpen: false, 
    buttons: { 
     Cancel: function() { 
      $(this).dialog('close'); 
     } 
    } 
}); 

Answer 4

Ich wollte nur zukünftige Finder wissen lassen. Es ist möglich, mit dem Z-Index ein ModalWidget über ein anderes zu setzen. Ich benutze jquery 1.10.3.

Wie Sie vorgehen, geben Sie Ihrem Dialogkonstruktor eine Dialogklasse.

$("#secondModalDialog").dialog({ 
    title: 'Title', 
    dialogClass: 'ModalWindowDisplayMeOnTopPlease', 
    width: 200, 
    height: 200 
}); 

Dann in Ihrem CSS, geben Sie einen höheren Z-Index als der erste Dialog verwendet.

.ModalWindowDisplayMeOnTopPlease { 
    z-index: 100; 
} 

Sie müssen möglicherweise überprüfen, welche man seine Verwendung mit Firebug oder ein Entwickler-Tool zu überprüfen, welche z-index mit instanziert wurde. Mein Standard-Z-Index war 90 auf dem ersten modalen Widget. Das Fenster Code sah smthg wie folgt aus:

<div id="firstModalDialog" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; max-height: none; height: 737px;"> 
<div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div>