jquery-ui-dialog - Як підключити до події закриття діалогу


186

Я використовую jquery-ui-dialog плагін

Я шукаю спосіб оновити сторінку, коли в деяких випадках діалогове вікно закриється.

Чи є спосіб зафіксувати близьку подію з діалогового вікна?

Я знаю, що можу запустити код, коли натиснути кнопку закриття, але це не охоплює закриття користувачем клавіші escape або x у верхньому правому куті.

Відповіді:


248

Я знайшов це!

Ви можете зловити подію закриття, використовуючи наступний код:

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

Очевидно, я можу замінити попередження тим, що мені потрібно зробити.
Редагувати: Станом на Jquery 1.7, bind () увімкнено ()


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

1
Це корисно, але $('div#popup_content')правильно? Що я повинен замінити на це, маючи на увазі, що моє діалог відкритий такjQuery.fn.dialog.open({})
Джейк N

Я бачу, що діалог спочатку закривається, а потім з’являється попередження, якщо це однакова ситуація з усіма, чи може хтось мені допомогти, щоб сповіщення з’явилося спочатку, а потім натиснуло кнопку ОК, потім вікно закрилося? Виправте мене ....
changeme

5
Це слід оновити для використання на () замість bind (), яке зараз застаріло.
RBZ

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

192

Я вважаю, що ви також можете це зробити під час створення діалогу (скопійованого з проекту, який я зробив):

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
Chris Gillum

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

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

Властивість діалогу "закрити" дає подію закриття для того ж.


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. З огляду на код я думаю, що для мене є гачок, але я не знаю, як до нього дістатися.
Брауні

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.