How can I have my blockUI show up on top of my jquery ui dialog?

Question

I am using jquery ui dialog and when i click a button on the form, I want to use jquery blockUI to show a "Saving . .. " message by using this line:

 $.blockUI();

but the block UI shows up under the dialog. I see this question, but it doesn't work anymore. I think its because it refers to jquery UI zindex setting which doesn't look like it exists anymore based on the documentation.

Is there an updated solution when using the latest jquery ui dialog library to have block UI message show up above the ui dialog?

Answer 1

Below should do it:

$.blockUI.defaults.baseZ = 4000;

Answer 2

No need for all that hassle. It's in the options.

http://malsup.com/jquery/block/#options

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

Answer 3

Had a look at the generated HTML and CSS of jQuery UI and BlockUI. BlockUI's BlockUI class is using z-index:1000, 1011 and jQuery UI dialog using z-index 1001 and position absolute.

here is the fix

$( "#dialog" ).dialog();
$('.ui-dialog').css({
   'z-index' : 100 // Could be any value but less than 1000.
}); 

Edit:

Here is bit safe side fix, if you are using animations to display dialog.

$( "#dialog" ).dialog({
    open: function() {
         $('.ui-dialog').css({
            'z-index' : 100 // Could be any value but less than 1000.
         });
    } 
});