jquery-ui-dialog - Jak dołączyć do zdarzenia zamknięcia okna dialogowego


186

Korzystam z jquery-ui-dialogwtyczki

Szukam sposobu na odświeżenie strony, gdy w niektórych okolicznościach okno dialogowe jest zamknięte.

Czy istnieje sposób na uchwycenie zdarzenia zamknięcia z okna dialogowego?

Wiem, że mogę uruchomić kod po kliknięciu przycisku zamykania, ale nie obejmuje to użytkownika zamykającego za pomocą klawisza Escape lub znaku X w prawym górnym rogu.

Odpowiedzi:


248

Znalazłem to!

Możesz złapać zdarzenie close przy użyciu następującego kodu:

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

Oczywiście mogę zastąpić ostrzeżenie tym, co muszę zrobić.
Edycja: Począwszy od Jquery 1.7, bind () stał się on ()


3
literówka: $ ('div # popup_content'). bind ('dialogclose', function (event)) {...}
CFNinja

1
Jest to pomocne, ale $('div#popup_content')prawda? Czym powinienem to zastąpić, mając na uwadze, że moje okno dialogowe jest otwarte w ten sposóbjQuery.fn.dialog.open({})
Jake N

Widzę, że okno dialogowe zamyka się najpierw, a następnie pojawia się alert, jeśli jest to sytuacja dla wszystkich, czy ktoś może mi pomóc, aby alert pojawił się najpierw, a następnie po kliknięciu OK, a następnie okno się zamyka? Popraw mnie ....
zmieniam

5
Należy to zaktualizować, aby używało on () zamiast bind (), który jest już nieaktualny.
RBZ

2
Należy pamiętać, że jeśli okno dialogowe interfejsu użytkownika jQuery nigdy wcześniej nie było otwierane na stronie, wówczas div nakładki nie będzie istniał w DOM. Dlatego zamiast tego możesz rozważyć zrobienie czegoś takiego:$('body').on('dialogclose', '.ui-dialog', function(){...});
thdoan

192

Wierzę, że możesz to zrobić również podczas tworzenia okna dialogowego (skopiowanego z projektu, który zrobiłem):

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

Uwaga close: CloseFunction


9
Ta odpowiedź wydaje mi się bardziej poprawna niż odpowiedź zaakceptowana. Prawidłową dokumentację API można znaleźć tutaj: api.jqueryui.com/dialog/#event-close
Chris Gillum

2
Jake N - Aby to zadziałało, musisz napisać funkcję dostępną w oknie dialogowym o nazwie „CloseFunction”, na przykład tuż powyżej var CloseFunction = function() { //Do your custom closing stuff here };
Adam Diament

Jest to opcja, ale w danym momencie kod jest używany w różnych miejscach. Wybrana odpowiedź działa, gdy chcesz dodać inne zachowanie w różnych kontekstach i ponownie użyć kodu tworzenia okna dialogowego, aby uzyskać standaryzację.
NectarSoft,

Masz overlaydwa razy. To nie jest konieczne, prawda?
radbyx

1
To działa i jest zdecydowanie potrzebną i przydatną odpowiedzią tutaj, ale uruchamia również kod CloseFunction za każdym razem, gdy okno dialogowe zostanie zamknięte w jakikolwiek sposób, nie tylko po zamknięciu za pomocą X lub czegoś takiego. Więc jeśli chcesz uruchomić określony kod, gdy okno dialogowe zostanie zamknięte za pomocą przycisku X lub Anuluj, ale nie, gdy zostanie zamknięte przez coś innego, co się dzieje (jak w moim przypadku, gdy przesłane dane wejściowe są zatwierdzone jako poprawne), to nie będzie praca.
mikato

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

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

Właściwość „close” okna dialogowego daje zdarzenie close dla tego samego.


16

Możesz także spróbować tego

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

10

To działało dla mnie ...

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

8

Począwszy od jQuery 1.7, metoda .on () jest preferowaną metodą dołączania procedur obsługi zdarzeń do dokumentu.

Ponieważ nikt nie stworzył odpowiedzi za pomocą. on()zamiast bind()zdecydowałem się go stworzyć.

$('div#dialog').on('dialogclose', function(event) {
     //custom logic fired after dialog is closed.  
});

6

dodaj opcję „zamknij” jak pod próbką i rób, co chcesz, funkcję wstawiania

close: function(e){
    //do something
}

4

Jeśli rozumiem typ okna, o którym mówisz, czy $ (window) .unload () (dla okna dialogowego) nie da ci haka, którego potrzebujesz?

(A jeśli źle zrozumiałem, a mówisz o oknie dialogowym utworzonym za pomocą CSS, a nie o wyskakującym oknie przeglądarki, wszystkie sposoby zamykania tego okna są elementami, dla których można zarejestrować uchwyty kliknięć.)

Edycja: Ach, rozumiem teraz, że mówisz o dialogach jquery-ui, które są tworzone przez CSS. Możesz zaczepić X, który zamyka okno, rejestrując moduł obsługi kliknięć dla elementu w klasie ui-dialog-titlebar-close .

Być może bardziej przydatne jest to, że wiesz, jak szybko to rozgryźć. Wyświetlając okno dialogowe, po prostu otwórz FireBug i sprawdź elementy, które mogą zamknąć okno. Natychmiast zobaczysz, jak są zdefiniowane, a to daje ci to, czego potrzebujesz, aby zarejestrować moduły obsługi kliknięć.

Tak więc, aby bezpośrednio odpowiedzieć na twoje pytanie, uważam, że odpowiedź brzmi naprawdę „nie” - nie ma zdarzenia zamykającego, które można zaczepić, ale „tak” - można zaczepić wszystkie sposoby, aby zamknąć okno dialogowe dość łatwo i uzyskać czego chcesz.


Cześć Andy. Zabawne jest okno dialogowe z jquery-ui, które jest tworzone przez css i javascript. Patrząc na kod, myślę, że jest dla mnie haczyk, ale nie wiem, jak się do niego dostać.
Brownie,

2

Możesz wypróbować następujący kod do przechwytywania zdarzenia zamykającego dla dowolnego elementu: strony, okna dialogowego itp.

$("#dialog").live('pagehide', function(event, ui) {
      $(this).hide();
});

1
Wystarczy użyć .on () - zamiast .live () lub .bind ()
cssyphus
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.