jQuery UI modal-dialog-overlay fade-out

Ist es möglich, einen fade-out-Effekt auf der jQuery UI modal-Dialogfeld overlay? Das Problem ist, dass das overlay-div wird zerstört, wenn das modale Dialogfeld geschlossen wird, die Verhinderung jeglicher Art von animation. Dies ist der code, den ich habe, dass würde funktionieren, wenn der overlay-div nicht zerstört wurde, auf schließen.

$("#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();
    }
});
Hat Ausblendung in beforeclose Arbeit?
Es scheint nicht zu funktionieren.

InformationsquelleAutor Alex Jorgenson | 2012-08-31

  1. 7

    Demo: 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;
        });
    }
});

    Ich gabelte Sie Ihre fiddler ' zu geben, den overlay-hintergrund Farbe und das overlay immer noch nicht ausblenden. Ich habe auch versucht, auf meiner website mit kein Glück. Edit: Richtige fiddler Gabel: jsfiddle.net/276Ft
    Tut mir Leid, dass. Aktualisiert link: jsfiddle.net/276Ft
    Das ist ziemlich erstaunlich, und nahe genug, um perfekt für mich! Aktualisieren Sie Ihre Antwort oben und ich werde markieren Sie es als richtig. Ich danke Ihnen sehr!
    Dank einer Tonne! Alles funktioniert schön. Ich hatte einige freie Zeit, so habe ich einige snooping durch die jQuery-UI-Quellcode und erstellt einen hacky Weg, dies zu erreichen. Dieser neue Weg ist ein hack und es erfordert, um Ihre eigenen overlay (mit jQuery UI natürlich). Die zwei Unterschiede sind, dass diese neue version wird das Spiel sowohl für Animationen zur gleichen Zeit, so dass die überlagerung verschwindet gleichzeitig das Dialogfeld wird. Dies behandelt auch den Fall, dass das Dialogfeld geschlossen werden kann, in irgendeiner Weise, anstatt Sie einfach auf die Schaltfläche schließen. Hier das fiddle: jsfiddle.net/TtTrN

    InformationsquelleAutor Danil Speransky

  2. 1

    Ich raten, nicht zu binden, das fadeOut der überlagerung der "closethick" close-Ereignis aus.

    Diese Lösung funktioniert in allen Fällen, zum Beispiel wenn Sie ein "Cancel" - Taste, oder wenn der dialog schließt sich nach etwas anderes zu tun aufgrund anderer Tasten:

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

    InformationsquelleAutor Takit Isy

Schreibe einen Kommentar