Nella finestra di dialogo dell'interfaccia utente jquery, è possibile inserire una finestra di dialogo modale sopra un'altra finestra di dialogo modale

Question

Ho una finestra di dialogo modale che utilizza la finestra di dialogo dell'interfaccia utente jquery. Ora desidero visualizzare un'altra finestra di dialogo quando l'utente modifica un campo nella prima finestra di dialogo. Entrambi dovrebbero essere modali.

è possibile questo, come ho cercato di mettere questo codice non e nulla sembra popup. Il seguente codice funziona bene quando si fa clic da una pagina normale (dove il controllo di selezione con id: selectDropdownThatICanChange) ma se lo stesso controllo di selezione che sto cambiando è esso stesso una finestra di dialogo ("Apri") non fa nulla. L'evento change viene attivato e il metodo open viene chiamato ma non viene visualizzato nulla.

$("#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'); 
}); 

e qui è la finestra di dialogo (che è solo un div)

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

Answer 1

finestre di dialogo dell'interfaccia utente non sono Singleton È possibile aprire il maggior numero di finestre di dialogo che si desidera. E per impostazione predefinita sono impilati. ma quando la finestra di dialogo viene messa a fuoco, viene visualizzata di fronte ad altre finestre di dialogo.

qui è il violino che ho creato per voi. 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'); 
     } 
    } 
}); 

ho messo discesa sulla prima finestra di dialogo e su evento di modifica ho aperto un'altra finestra sopra la prima finestra di dialogo.

Answer 2

Come sushanth reddy indicato nei commenti, impostare lo z-index della finestra di dialogo:

$("#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'); 
     } 
    } 
}); 

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

Answer 3

È possibile aprire qualsiasi numero di modali e il comportamento predefinito o si sta impilando nell'ordine in cui sono stati aperti.

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

Volevo solo far sapere ai cercatori futuri. È possibile utilizzare z-index per inserire un modalWidget su un altro. Sto usando jquery ui 1.10.3.

Il modo in cui si va a questo proposito è, si dà il dialogo costruttore di una classe di finestra di dialogo.

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

Poi nel CSS, si specifica un più alto z-index rispetto alla prima finestra di dialogo sta usando.

.ModalWindowDisplayMeOnTopPlease { 
    z-index: 100; 
} 

Potrebbe essere necessario controllare quale una sua utilizzando con Firebug o qualche strumento dev per verificare quali z-index è stato istanziato con. Il mio z-index predefinito era 90 sul primo widget modale. Il codice finestra dava smthg come questo:

<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>