title: jQuery Show Dialog Modal Animation Happens while Background Dimmed
body: <p>This is an annoyance that I've tolerated for too long, and finally decided to pursue an answer. I am showing a modal jQuery dialog box in my web app, but the animation to show it doesn't occur in the right order. I'm setting a click event (using jQuery) to a link on a page, and when the user clicks it, it creates a new Dialog, with autoOpen set to true. Cancel from the dialog destroys it so that the user can open it again on the next click.</p>
  
  <p>No matter what animation I use (currently using "blind"), it seems like the whole page dims first, then opens the dialog box (still dimmed), and once the dialog box has completely opened, it undims it. Just not happening in the right order. Has anyone else seen this, or know why this might be happening? Code I'm using to create dialog is below:</p>
  
  <pre><code>function setDialogWindows($dialogDiv, $leftList, $rightList, leftArray, rightArray, $htmlItemList) {
  
      $dialogDiv.dialog({
          autoOpen: true,
          modal: true,
          show: 'blind',
          hide: 'blind',
          width: 600,
          resizable: false,
          buttons: {
              Cancel: function() {
                  resetDialog($leftList, $rightList);
                  $(this).dialog('destroy');
              },
              'Save': function() {
  
                  if (saveDialog($leftList, $rightList, leftArray, rightArray, $htmlItemList)) {
                      showHideItemList("show");
                  }
                  else
                      showHideItemList("hide");
  
                  $(this).dialog('destroy');
              }
          }
      });
  }
  </code></pre>
  
  <p>Any help would be appreciated. Thanks.</p>