jquery ui - Nested Dialog z-index issues

Question

Tengo un cuadro de diálogo que muestra una tabla, y cuando hago clic en un botón "Eliminar", voy a abrir otro cuadro de diálogo para pedir confirmación. Actualmente esto funciona bien por primera vez, pero si hago clic en el botón "Eliminar" por segunda vez, se muestra el cuadro de diálogo Eliminar detrás del primer cuadro de diálogo, por lo que en realidad es invisible para el usuario.

Me trataron de establecer el índice z para ambos de diálogo, pero no sé por qué sólo se está trabajando en la primera vez

A continuación se presenta la muestra de mi guión:

// The 1st dialog 
    var $detaildialog = $('#tableplaceholder').dialog({ 
     autoOpen: false, 
     modal: true, 
     width: '800', 
     height: 'auto' 

    }); 
    // Some steps to set the url.. then open the dialog 
    $detaildialog.load(url, function() { 

      $('#loading').hide(); 
      $detaildialog.dialog('open'); 
     }); 

    // Then, when delete action is called, open the second dialog 
    fnOnDeleting: function (tr, id, fnDeleteRow) { 
      var $dialog = $('#checkdeletedialog').dialog({ 
       autoOpen: false, 
       modal: true, 
       title: 'Delete Confirmation', 
       zIndex: 90000 
      }); 
      $dialog.dialog('open'); 
     } 

¿Algo que estoy haciendo mal aquí?

agradecería cualquier ayuda .. gracias :)

Answer 1

Establecer la propiedad "pila" de la segunda diálogo para cierto.

function (tr, id, fnDeleteRow) { 
     var $dialog = $('#checkdeletedialog').dialog({ 
      autoOpen: false, 
      modal: true, 
      stack: true, 
      title: 'Delete Confirmation' 
     }); 
     $dialog.dialog('open'); 
    } 

Más información here.

EDIT: También hemos tenido problemas con los diálogos modales que se comportan de manera extraña después de abrir una vez. Descubrimos que 'destruir' el diálogo cuando se cierra soluciona el problema, p.

var $dialog = $('#checkdeletedialog').dialog({ 
     autoOpen: false, 
     modal: true, 
     stack: true, 
     title: 'Delete Confirmation', 
     close: function() { 
      $(this).dialog('destroy'); 
     } 
    });