How can I make a jQuery UI Dialog Modal during the show-effect?

Question

I have a jQuery UI Dialog, it is Modal and shows with a Bounce effect. I use a Theme where the background is dimmed with a striped image. The first time the Dialog is opened, the striped background also covers the dialog during the bounce effect. Once the bounce effect has finished, the dialog becomes modal and appears in front of the striped background. On the next opening, the dialog bounces in front of the background right away.

How can I make the dialog appear in front of the background right away?

Answer 1

This sounds like the zIndex of the dialog is not assigned until after the animation. Try this in your CSS:

.ui-dialog {
  z-index: 1002;
}

Dialogs usually have this CSS class, and the overlay usually has a zIndex of 1000 (at least in the version I am currently using). If this doesn't work, try to find out (using Firebug) what other classes are assigned only during the animation and assign a zIndex to those.

Answer 2

Tom's answer pointed me in the right direction, and Firebug was very useful!

The dialog is wrapped in a <div class="ui-effects-wrapper"> which is generated in the createWrapper function in ui\effects.core.js I added a parameter "z-index=1005" (just to be sure ;) there.

So in jquery-ui-1.7.2.custom.min.js it now looks like this

createWrapper:function(f){if(f.parent().is(".ui-effects-wrapper")){return f.parent()}var g={width:f.outerWidth(true),"z-index":1005,height:f.outerHeight(true),"float":f.css("float")};f.wrap('<div class="ui-effects-wrapper" style="font-size:100%;border:none;margin:0;padding:0;z-index:1002"></div>');

Not sure if it's the best way, but it works.