jQuery Show Dialog Modal Animation Happens while Background Dimmed

Question

Hello all,

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.

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:

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

Any help would be appreciated. Thanks.

Answer 1

I was able to get this to display correctly within IE and FireFox where the page was dimmed and the dialog animation completed correctly (non-dimmed). Do you have any other jQuery script that's acting on that <div> tag?

EDIT: I was just able to recreate this issue. It would seem that it's an issue with the initial displaying of the dialog box combined with an animation. In your case, because your constantly creating/destroying the dialog this would appear every time. Here's something you might want to try:

function setupDialog($dialogDiv) {
    // set autoOpen: false
    // within Cancel and Save use .dialog('close')
}

// Define the dialog boxes:
setupDialog($('#dialog1')); 
setupDialog($('#dialog2')); 
setupDialog($('#dialog3')); 

// Show the dialog on button clicks:
$('#button1').click(function() {
    $('#dialog1').dialog('open');
});
$('#button2').click(function() {
    $('#dialog2').dialog('open');
});
$('#button3').click(function() {
    $('#dialog3').dialog('open');
});