Dialog: zIndex error with animated modal dialog

if u use any kind of effects(puff,explode,slide,blablabla..) and "modal:true" in dialog options

if u will show dialog when the page is firstloaded

when the effect is in use dialog window is under overlay layer

when the effect is done it overlaps

I hope the problem will be over soon..

.

sorry my english is very bad..

.

my javascript codes :

//define config object
var dialogOpts = {
  show: 'puff',
  draggable: false,
  autoOpen: false,
  modal: true,
  closeOnEscape: false
};
//create the dialog
$("#dialog").dialog(dialogOpts);
$('#dialog').dialog('option', 'buttons', { //no butons });
$("#dialog").dialog("open");

and my html codes :

<div id="dialog" title="Information !">
  <p>
    <span class="ui-icon ui-icon-info" style="float:left; margin:0 7px 50px 0;">
    </span>
      Working.. Please Wait !<br>
  </p>
  <br>
  <p align="center">
    <img src="images/giris/pbs.gif" title="Loading Animation" />
  </p>
</div>