jQuery Show Dialog L'animation modale se produit pendant la durée de l'arrière-plan

Question

Ceci est un désagrément que j'ai toléré depuis trop longtemps, et j'ai finalement décidé de poursuivre une réponse. Je montre une boîte de dialogue jQuery modale dans mon application Web, mais l'animation pour l'afficher ne se produit pas dans le bon ordre. Je mets un événement click (en utilisant jQuery) à un lien sur une page, et quand l'utilisateur clique dessus, il crée un nouveau dialogue, avec autoOpen défini sur true. Annuler de la boîte de dialogue le détruit afin que l'utilisateur puisse l'ouvrir à nouveau au prochain clic.

Quelle que soit l'animation que j'utilise (actuellement en aveugle), il semble que toute la page s'assombrit d'abord, puis ouvre la boîte de dialogue (toujours grisée) et la désactive une fois ouverte. Juste ne pas se produire dans le bon ordre. Quelqu'un d'autre a-t-il vu cela ou sait-il pourquoi cela pourrait se produire? Code que j'utilise pour créer le dialogue est ci-dessous:

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

Toute aide serait appréciée. Merci.

Answer 1

J'ai réussi à afficher correctement ceci dans IE et FireFox où la page était grisée et l'animation de la boîte de dialogue terminée correctement (non grisée). Avez-vous un autre script jQuery qui agit sur cette balise <div>?

EDIT: J'ai juste pu recréer ce problème. Il semblerait que ce soit un problème avec l'affichage initial de la boîte de dialogue combinée avec une animation. Dans votre cas, parce que votre création/destruction constante du dialogue apparaît à chaque fois. Voici quelque chose que vous pourriez vouloir essayer:

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