jquery-ui-dialog - Как подключиться к событию закрытия диалога


187

Я использую jquery-ui-dialogплагин

Я ищу способ обновить страницу, когда в некоторых случаях диалоговое окно закрыто.

Есть ли способ зафиксировать событие закрытия из диалогового окна?

Я знаю, что могу запускать код при нажатии кнопки закрытия, но это не касается закрытия пользователя с помощью escape или x в правом верхнем углу.

Ответы:


249

Я нашел это!

Вы можете поймать событие закрытия, используя следующий код:

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

Очевидно, я могу заменить предупреждение на все, что мне нужно.
Изменить: начиная с JQuery 1.7, bind () стал on ()


3
опечатка: $ ('div # popup_content'). bind ('dialogclose', function (event)) {...}
CFNinja

1
Это полезно, но $('div#popup_content')правильно? Чем я должен это заменить, имея в виду, что мой диалог открывается следующим образомjQuery.fn.dialog.open({})
Джейк Н.

Я вижу, что сначала закрывается диалоговое окно, а затем появляется предупреждение, если это одинаковая ситуация для всех, может ли кто-нибудь помочь мне, чтобы сначала появилось это предупреждение, а затем при нажатии кнопки ОК окно закрывается? Поправьте меня ....
changeme

5
Это должно быть обновлено для использования on () вместо bind (), которое теперь устарело.
RBZ

2
Имейте в виду, что если диалоговое окно пользовательского интерфейса jQuery никогда раньше не открывалось на странице, то оверлейный div не будет существовать в DOM. Следовательно, вы можете подумать о том, чтобы сделать что-то вроде этого:$('body').on('dialogclose', '.ui-dialog', function(){...});
thdoan

193

Я считаю, что вы также можете сделать это при создании диалога (скопированного из проекта, который я сделал):

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

Заметка close: CloseFunction


9
Мне этот ответ кажется более правильным, чем принятый. Кроме того, правильную документацию по API можно найти здесь: api.jqueryui.com/dialog/#event-close
Крис

2
Джейк Н. - Вам действительно нужно написать функцию, доступную для диалогового окна, под названием «CloseFunction», чтобы это работало, например, вы можете написать чуть выше var CloseFunction = function() { //Do your custom closing stuff here };
Адам Диамент

Это вариант, но время от времени код используется в разных местах. Выбранный ответ работает, когда вы хотите добавить другое поведение в разных контекстах и ​​повторно использовать код создания диалогового окна для стандартизации.
NectarSoft

У вас overlayдважды. Это не обязательно?
radbyx

1
Это работает и определенно является необходимым и полезным ответом здесь, но он также запускает код CloseFunction каждый раз, когда диалог закрывается любым способом, а не только когда закрывается с помощью X или чего-то еще. Поэтому, если вы хотите запустить определенный код, когда диалоговое окно закрывается с помощью X или кнопки Отмена, но не когда оно закрывается из-за чего-то еще (например, в моем случае, когда отправленный ввод подтвержден как правильный), тогда это не Работа.
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');
    }
});

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

"close" свойство диалога дает событие закрытия для того же самого.


16

Вы также можете попробовать это

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

Вот что у меня сработало ...

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

8

Начиная с jQuery 1.7, метод .on () является предпочтительным методом для присоединения обработчиков событий к документу.

Потому что на самом деле никто не создал ответа с использованием. on()вместо этого bind()я решил создать его.

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

6

добавьте опцию «закрыть», как в примере, и сделайте то, что вы хотите, встроенную функцию

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

4

Если я понимаю, о каком окне вы говорите, не каком $ (window) .unload () (для диалогового окна) не даст вам нужный крючок?

(И если я неправильно понял, и вы говорите о диалоговом окне, созданном с помощью CSS, а не о всплывающем окне браузера, тогда все способы закрытия этого окна являются элементами, для которых вы можете зарегистрировать обработчиков кликов.)

Изменить: А, теперь я вижу, что вы говорите о диалогах jquery-ui, которые создаются с помощью CSS. Вы можете подключить X, который закрывает окно, зарегистрировав обработчик кликов для элемента с классом ui-dialog-titlebar-close .

Возможно, более полезным будет то, что вы расскажете, как быстро это понять. При отображении диалогового окна просто откройте FireBug и проверьте элементы, которые могут закрыть окно. Вы сразу увидите, как они определены, и это даст вам все необходимое для регистрации обработчиков кликов.

Итак, чтобы напрямую ответить на ваш вопрос, я считаю, что ответ действительно «нет» - вы не можете зацепить событие закрытия, но «да» - вы можете довольно легко зацепить все способы закрыть диалоговое окно и получить то, что ты хочешь.


Привет, Энди. Меня забавляет диалог jquery-ui, созданный с помощью css и javascript. Глядя на код, я думаю, что это для меня зацепка, но я не знаю, как к ней добраться.
Brownie

2

Вы можете попробовать следующий код для записи события закрытия любого элемента: страницы, диалога и т. Д.

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

1
Просто используйте .on () - вместо .live () или .bind ()
cssyphus
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.