jQuery UI boîte de dialogue modale de la superposition de fade out

Est-il possible d'appliquer un effet de fondu de sortie sur l'INTERFACE utilisateur de jQuery boîte de dialogue modale de superposition? Le problème est que la superposition de la div est détruite lorsque la boîte de dialogue modale est fermé à la prévention de tout type d'animation. C'est le code que j'ai qui pourrait fonctionner si la superposition de la div n'a pas été détruit à la fermeture.

$("#edit-dialog-box").dialog(
{
    autoOpen: false,
    modal: true,
    width: "30em",
    show: "fade",
    hide: "fade",
    open: function()
    {
        $(".ui-widget-overlay").hide().fadeIn();
    },
    close: function()
    {
        $(".ui-widget-overlay").fadeOut();
    }
});
Ne décoloration dans beforeclose travail?
Il ne semble pas fonctionner.

OriginalL'auteur Alex Jorgenson | 2012-08-31

  1. 7

    Démo: http://jsfiddle.net/276Ft/2/

    $('#dialog').dialog({
    autoOpen: true,
    modal: true,

    width: '100px',
    height: '100px',

    show: 'fade',
    hide: 'fade',

    open: function () {
        $('.ui-widget-overlay', this).hide().fadeIn();

        $('.ui-icon-closethick').bind('click.close', function () {
            $('.ui-widget-overlay').fadeOut(function () {
              $('.ui-icon-closethick').unbind('click.close');
              $('.ui-icon-closethick').trigger('click');
            });

            return false;
        });
    }
});

    Je bifurquais votre violon pour donner la superposition d'une couleur de fond et la superposition n'est toujours pas fondu. J'ai aussi essayé sur mon site avec pas de chance. Edit: Corriger fiddler fourche: jsfiddle.net/276Ft
    Désolé à ce sujet. Mise à jour du lien: jsfiddle.net/276Ft
    C'est assez étonnant et assez proche de parfait pour moi! Mise à jour de votre réponse ci-dessus et je vais le marquer comme étant correcte. Merci beaucoup!
    merci une tonne! Les choses fonctionnent très bien. J'avais du temps libre, j'ai donc fait quelques espionnage par le biais de l'INTERFACE utilisateur de jQuery code source et créé un hacky façon d'accomplir ceci. Cette nouvelle façon est un hack et il a besoin pour faire votre propre surcouche (à l'aide de jQuery UI, bien sûr). Les deux différences sont que cette nouvelle version va jouer à la fois des animations dans le même temps, de sorte que la superposition disparaît en même temps, la boîte de dialogue. Ce gère également le cas que la boîte de dialogue peut être fermé en quelque sorte au lieu de simplement en cliquant sur le bouton fermer. Voici le violon: jsfiddle.net/TtTrN

    OriginalL'auteur Danil Speransky

  2. 1

    Je conseille de ne pas lier le fadeOut de la superposition de la “closethick” près de l'événement.

    Cette solution fonctionne dans tous les cas, par exemple, si vous utilisez un bouton “Annuler”, ou si la boîte de dialogue se ferme après faire quoi que ce soit à cause d'autres boutons:

    $('#dialog').dialog({
    autoOpen: true,
    modal: true,

    width: '100px',
    height: '100px',

    show: 'fade',
    hide: 'fade',

    open: function () {
        $('.ui-widget-overlay', this).hide().fadeIn();
    },

    beforeClose: function(event, ui){
        //Wait for the overlay to be faded out to try to close it again
        if($('.ui-widget-overlay').is(":visible")){
            $('.ui-widget-overlay').fadeOut(function(){
                $('.ui-widget-overlay').hide();
                $('.ui-icon-closethick').trigger('click');
            });
            return false; //Avoid closing
        }
    }
});

    OriginalL'auteur Takit Isy