blockui over jQueryUI modal dialog

Question

I can't make BlockUI work over a modal dialog.
I tried to look after z-index issues, but without success...

In my web page, here is the head :

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

and the body:

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

Any idea?

Solution 1

You don't specify what you have tried with z-index.

The blockUI plugin has an option to change the z-index of the message it creates (documentation):

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

jQuery UI Dialog as an option for specifying a z-index as well. Its default value is 1000. So you have to set a higher number for the BlockUI option, let's say 2000:

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

DEMO

Solution 2

Thanks Didier for your answer, it helped get me on track. You'll notice that the jsfiddle in Didier's answer works the first time you open the dialog but any further open and ajax results in the blockUI elements appearing beneath the dialog. The dialog must recalibrate it's z-index to be the top dog every time it opens.

I've found two possible ways around this:

1. 'destroy' the dialog when it is closed and recreate it when it is opened.

2. rather than blocking the whole UI, just block the dialog. This can be done using the widget method, like this:

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