CODEWITHSUNDEEP
jqueryjquery-ui-dialogblockui
leora
leora

Reputation: 196539

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

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?

Upvotes: 1

Views: 10256

Answers (3)

Alireza Fattahi
Alireza Fattahi

Reputation: 45515

Below should do it:

$.blockUI.defaults.baseZ = 4000;

Upvotes: 4

dbinott
dbinott

Reputation: 911

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,

Upvotes: 3

redV
redV

Reputation: 684

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.
         });
    } 
});

Upvotes: 0

Related Questions