jquery-ui - example - jquery popup window

blockui sobre el diálogo modal jQueryUI

Question

No puedo hacer que BlockUI funcione en un diálogo modal.
Intenté ocuparme de los problemas del índice z, pero sin éxito ...

En mi página web, aquí está 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

Gracias a Didier por su respuesta, me ayudó a encaminarme. 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 formas posibles de solucionar esto:

1. '' destroy '' el diálogo cuando está cerrado y recrearlo cuando se abre.

2. en lugar de bloquear toda la interfaz de usuario, simplemente bloquea el diálogo. Esto se puede hacer usando el método widget , como este:

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

Answer 2

No especifica qué ha intentado con z-index.

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

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

jQuery UI Dialog como una opción para especificar un índice Z también. Su valor predeterminado es 1000. Por lo tanto, debe establecer un número mayor para la opción BlockUI, digamos 2000:

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

DEMO