javascript - jquery-ui-dialog - Hvordan koble til dialoglukkingshendelsen


Jeg bruker jquery-ui-dialog-pluginen

Jeg leter etter en måte å oppdatere siden på under visse omstendigheter når dialogen lukkes.

Finnes det en måte å fange et lukkingsarrangement fra dialogen på?

Jeg vet at jeg kan kjøre kode når lukkeknappen blir klikket, men det dekker ikke når brukeren lukker med escape eller krysset oppe i høyre hjørne.

Svar #1

Jeg har funnet det!

Du kan fange lukke-hendelsen ved å bruke følgende kode:

 $('div#popup_content').on('dialogclose', function(event) {
     alert('closed');
 });

Selvfølgelig kan jeg erstatte alerten med hva som helst jeg trenger å gjøre.
Redigering: Fra og med jQuery 1.7 har bind() blitt on()

Svar #2

Jeg tror du også kan gjøre det mens du lager dialogen (kopiert fra et prosjekt jeg gjorde):

dialog = $('#dialog').dialog({
    modal: true,
    autoOpen: false,
    width: 700,
    height: 500,
    minWidth: 700,
    minHeight: 500,
    position: ["center", 200],
    close: CloseFunction,
    overlay: {
        opacity: 0.5,
        background: "black"
    }
});

Merk close: CloseFunction

Svar #3

$("#dialog").dialog({
    autoOpen: false,
    resizable: false,
    width: 400,
    height: 140,
    modal: true, 
    buttons: {
        "SUBMIT": function() { 
        $("form").submit();
    }, 
        "CANCEL": function() { 
        $(this).dialog("close");
    } 
    },
    close: function() {
      alert('close');
    }
});

Svar #4

$( "#dialogueForm" ).dialog({
              autoOpen: false,
              height: "auto",
              width: "auto",
              modal: true,
                my: "center",
                at: "center",
                of: window,
              close : function(){
                  // functionality goes here
              }  
              });

«close»-egenskapen til dialogen gir close-hendelsen for den samme.

Svar #5

Du kan også prøve dette

$("#dialog").dialog({
            autoOpen: false,
            resizable: true,
            height: 400,
            width: 150,
            position: 'center',
            title: 'Term Sheet',
            beforeClose: function(event, ui) { 
               console.log('Event Fire');
            },
            modal: true,
            buttons: {
                "Submit": function () {
                    $(this).dialog("close");
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });

Svar #6

Dette er det som fungerte for meg...

$('#dialog').live("dialogclose", function(){
   //code to run on dialog close
});

Relaterte artikler