En el cuadro de diálogo de la IU de jquery, es posible colocar un cuadro de diálogo modal sobre otro cuadro de diálogo modal

Question

Tengo un cuadro de diálogo modal usando el cuadro de diálogo de la IU de jquery. Ahora quiero mostrar otro cuadro de diálogo cuando el usuario cambie un campo en el primer cuadro de diálogo. Ambos deben ser modales.

Esto es posible, ya que intenté poner este código allí y parece que no aparece nada. El siguiente código funciona bien cuando se hace clic desde una página normal (donde el control de selección con id: selectDropdownThatICanChange) pero si el mismo control de selección que estoy cambiando es un diálogo, la línea de diálogo ("Abrir") no hace nada. El evento de cambio se activa y se llama al método abierto, pero no aparece nada.

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

y aquí está el cuadro de diálogo (que es sólo un div)

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

Answer 1

diálogos de interfaz de usuario no se Singleton Puede abrir tantos cuadros de diálogo como desee. Y por defecto están apilados. pero cuando Dialog se enfoca, aparece enfrente de otros diálogos.

aquí está el fiddle que creé para ti. 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'); 
     } 
    } 
}); 

He puesto desplegable en el primer cuadro de diálogo y el evento de cambio abrí otro diálogo por encima del primer cuadro de diálogo.

Answer 2

Como sushanth reddy se indica en los comentarios, establece el índice z del diálogo:

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

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

Answer 3

Puede abrir cualquier número de modales y el comportamiento predeterminado o está apilando en el orden en que fueron abiertos.

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

Solo quiero que los futuros buscadores sepan. Es posible usar z-index para poner un modalWidget sobre otro. Estoy usando jquery ui 1.10.3.

La manera de hacerlo es darle una clase de diálogo al constructor de su diálogo.

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

Luego, en su CSS, especifica un índice z más alto que el que está usando el primer cuadro de diálogo.

.ModalWindowDisplayMeOnTopPlease { 
    z-index: 100; 
} 

Es posible que necesite para comprobar cuál su uso con Firebug o alguna herramienta dev para comprobar qué z-index se instanciado con. Mi índice z predeterminado era 90 en el primer Widget modal. El código ventana daba smthg así:

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