blockui sobre el cuadro de diálogo modal jQueryUI

Question

No puedo hacer que BlockUI funcione en un cuadro de diálogo modal.
Traté de cuidar de cuestiones z-index, pero sin éxito ...

En mi página web, aquí es la cabeza:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" ></script> 
<script type="text/javascript" src="http://jquery.malsup.com/block/jquery.blockUI.js?v2.38" ></script> 
<link media="all" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" rel="stylesheet" /> 

y el cuerpo:

<div id="dialog_test" title="Test"> 
    TEST 
</div> 

<a href="#" id="go">GO</a> 

<script> 
    $(function() { 
     $("#dialog_test").dialog({ 
      autoOpen: false, 
      modal: true, 
      buttons: { 
       "Cancel": function() { 
        $(this).dialog("close"); 
       }, 
       "Ajax": function() { 
        $.ajax({ 
         "url" : "http://jquery.malsup.com/block/wait.php", 
         "success" : function(json) { 
          $("#dialog_test").dialog("close"); 
         } 
        }); 
       } 
      } 
     }); 

     $("#go").click(function(event) { 
      event.preventDefault(); 
      $("#dialog_test").dialog("open"); 
     }); 

    }); 

    $(document) 
     .ajaxStart(function() { 
      $.blockUI({ 
       theme: true 
      }) 
     }) 
     .ajaxStop($.unblockUI); 

</script> 

¿Alguna idea?

Answer 1

No especifica qué ha intentado con z-index.

El blockUI plugin tiene una opción para cambiar el índice z del mensaje que crea (documentation):

// z-index for the blocking overlay 
baseZ: 1000, 

jQuery UI de diálogo como un option for specifying a z-index también. Su valor por defecto es 1000. Así que hay que establecer un número mayor para la opción BlockUI, digamos 2000:

$.blockUI({ 
    theme: true, 
    baseZ: 2000 
}) 

DEMO

Answer 2

Gracias Didier por su respuesta, que ayudó a mí en la pista. Notará que el jsfiddle en la respuesta de Didier funciona la primera vez que abre el cuadro de diálogo, pero cualquier otro resultado abierto y ajax da como resultado los elementos blockUI que aparecen debajo del cuadro de diálogo. El diálogo debe recalibrar su índice z para ser el perro superior cada vez que se abre.

he encontrado dos maneras posibles en torno a este:

1. 'destroy' el cuadro de diálogo cuando está cerrado y volver a crearla cuando que se abre.

2. en lugar de bloquear toda la interfaz de usuario, simplemente bloquee el cuadro de diálogo . Esto se puede hacer mediante el widget method, así:

   $(".selector").dialog("widget").block({ 
       theme: false, 
       message: '<h1>Wait for me please...</h1>', 
       css: { border: '3px solid #a00' } 
   });