Я использую плагин jquery-ui-dialog
Я ищу способ обновить страницу, когда в некоторых случаях диалоговое окно закрыто.
Есть ли способ зафиксировать событие закрытия из диалогового окна?
Я знаю, что могу запустить код при нажатии кнопки закрытия, но это не касается закрытия пользователя с помощью escape или x в правом верхнем углу.
Если я понимаю, о каком типе окна вы говорите, разве $ (окно) .unload () (для диалогового окна) не даст вам нужный крючок?
(И если я неправильно понял, и вы говорите о диалоговом окне, созданном с помощью CSS, а не о всплывающем окне браузера, тогда все способы закрытия этого окна - это элементы, для которых вы можете зарегистрировать обработчиков кликов.)
Редактировать: А, я вижу, теперь вы говорите о диалогах jquery-ui, которые создаются с помощью CSS. Вы можете подключить Икс, который закрывает окно, зарегистрировав обработчик кликов для элемента с классом ui-dialog-titlelebar-close.
Возможно, более полезным будет то, что вы расскажете, как быстро это понять. При отображении диалогового окна просто откройте FireBug и Осмотреть элементы, которые могут закрыть окно. Вы сразу увидите, как они определены, и это даст вам все необходимое для регистрации обработчиков кликов.
Итак, чтобы напрямую ответить на ваш вопрос, я считаю, что ответ на самом деле «нет» - вы не можете зацепить событие закрытия, но «да» - вы можете довольно легко зацепить все способы, чтобы закрыть диалоговое окно и получить то, что ты хочешь.
Я нашел это!
Вы можете поймать событие закрытия, используя следующий код:
$('div#popup_content').on('dialogclose', function(event) {
alert('closed');
});
Очевидно, я могу заменить предупреждение на все, что мне нужно. Редактировать: Начиная с JQuery 1.7, bind () стал on ()
опечатка: $ ('div # popup_content'). bind ('dialogclose', function (event)) {...}
Это полезно, но правильно ли $('div#popup_content')
? Чем я должен заменить это, имея в виду, что мой диалог открывается как этот jQuery.fn.dialog.open({})
Я вижу, что сначала закрывается диалоговое окно, а затем появляется предупреждение. Если это одинаковая ситуация для всех, может ли кто-нибудь помочь мне, чтобы сначала появилось это предупреждение, а затем при нажатии кнопки ОК окно закрывается? Поправьте меня....
Я все время получаю «ReferenceError: событие не определено». Как мне определить событие?
Это должно быть обновлено, чтобы использовать on () вместо bind (), которая теперь устарела.
Имейте в виду, что если диалоговое окно пользовательского интерфейса jQuery никогда раньше не открывалось на странице, то оверлейный div не будет существовать в DOM. Следовательно, вы можете подумать о том, чтобы сделать что-то вроде этого: $('body').on('dialogclose', '.ui-dialog', function(){...});
Если это будет полезно для других, событие будет иметь свойство eventPhase
при закрытии значком X или клавишей Esc. Если вы закроете программно (например, $(...).dialog('close')
), этого не будет. Это один из способов отличить.
Я считаю, что вы также можете сделать это при создании диалога (скопированного из моего проекта):
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
Мне этот ответ кажется более правильным, чем принятый. Также здесь можно найти правильную документацию по API: api.jqueryui.com/dialog/#event-close
Джейк Н. - Вам действительно нужно написать функцию, доступную для диалогового окна, под названием «CloseFunction», чтобы это работало, например, чуть выше вы можете написать var CloseFunction = function() { //Do your custom closing stuff here };
Это вариант, но время от времени код используется в разных местах. Выбранный ответ работает, когда вы хотите добавить другое поведение в разных контекстах и повторно использовать код создания диалогового окна для стандартизации.
У вас overlay
дважды. Это не обязательно?
Я полагаю, что нет ... поскольку первое будет преобладать над вторым. Я удалил это.
Это работает и определенно является необходимым и полезным ответом здесь, но он также запускает код CloseFunction каждый раз, когда диалог закрывается любым способом, а не только когда закрывается с помощью X или чего-то еще. Поэтому, если вы хотите запустить определенный код, когда диалоговое окно закрывается с помощью X или кнопки Отмена, но не когда оно закрывается из-за чего-то еще (например, в моем случае, когда отправленный ввод подтвержден как правильный), тогда это не будет Работа.
В итоге я использовал обходной путь, чтобы установить элемент данных для своего диалога, который является логическим флагом, установленным в другом месте, и я использую его, чтобы определить, должен ли выполняться мой закрытый код, как в этом ответе, или нет. Чтобы быть точным, первое, что я делаю после закрытия: это условие if, которое проверяет элемент данных.
$("#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');
}
});
Вы можете попробовать следующий код для записи события закрытия любого элемента: страницы, диалога и т. д.
$("#dialog").live('pagehide', function(event, ui) {
$(this).hide();
});
Просто используйте .on () - вместо .live () или .bind ()
Это то, что у меня сработало ...
$('#dialog').live("dialogclose", function(){
//code to run on dialog close
});
Вы также можете попробовать это
$("#dialog").dialog({
autoOpen: false,
resizable: true,
height: 400,
width: 150,
position: 'center',
title: 'Term Sheet',
beforeClose: function(event, ui) {
console.info('Event Fire');
},
modal: true,
buttons: {
"Submit": function () {
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$( "#dialogueForm" ).dialog({
autoOpen: false,
height: "auto",
width: "auto",
modal: true,
my: "center",
at: "center",
of: window,
close : function(){
// functionality goes here
}
});
"close" свойство диалога дает событие закрытия для того же самого.
As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.
Поскольку на самом деле никто не создал ответа с использованием .on()
вместо bind()
, я решил создать его.
$('div#dialog').on('dialogclose', function(event) {
//custom logic fired after dialog is closed.
});
Ответ OP в основном идентичен
@reggaeguitar правда. OP обновил ответ на () в 2015 году :)
Я не знал, что они обновили свои после вашего, я изменю свой голос против на голос за, если вы отредактируете свой ответ
добавьте опцию «закрыть», как в примере, и сделайте то, что вы хотите, встроенную функцию
close: function(e){
//do something
}
Привет, Энди. Меня забавляет диалог jquery-ui, созданный с помощью css и javascript. Глядя на код, я думаю, что это для меня зацепка, но я не знаю, как к ней добраться.