У меня есть диалоговое окно пользовательского интерфейса jQuery, которое отображается при нажатии определенных элементов. Я хотел бы закрыть диалоговое окно, если щелчок происходит где-либо, кроме этих запускающих элементов или самого диалогового окна.
Вот код для открытия диалога:
$(document).ready(function() {
var $field_hint = $('<div></div>')
.dialog({
autoOpen: false,
minHeight: 50,
resizable: false,
width: 375
});
$('.hint').click(function() {
var $hint = $(this);
$field_hint.html($hint.html());
$field_hint.dialog('option', 'position', [162, $hint.offset().top + 25]);
$field_hint.dialog('option', 'title', $hint.siblings('label').html());
$field_hint.dialog('open');
});
/*$(document).click(function() {
$field_hint.dialog('close');
});*/
});
Если я раскомментирую последнюю часть, диалог никогда не откроется. Я предполагаю, что это потому, что тот же щелчок, который открывает диалоговое окно, снова закрывает его.
Последнее примечание по рабочему коду
: здесь используется плагин внешних событий jQuery.
$(document).ready(function() {
// dialog element to .hint
var $field_hint = $('<div></div>')
.dialog({
autoOpen: false,
minHeight: 0,
resizable: false,
width: 376
})
.bind('clickoutside', function(e) {
$target = $(e.target);
if (!$target.filter('.hint').length
&& !$target.filter('.hintclickicon').length) {
$field_hint.dialog('close');
}
});
// attach dialog element to .hint elements
$('.hint').click(function() {
var $hint = $(this);
$field_hint.html('<div style="max-height: 300px;">' + $hint.html() + '</div>');
$field_hint.dialog('option', 'position', [$hint.offset().left - 384, $hint.offset().top + 24 - $(document).scrollTop()]);
$field_hint.dialog('option', 'title', $hint.siblings('label').html());
$field_hint.dialog('open');
});
// trigger .hint dialog with an anchor tag referencing the form element
$('.hintclickicon').click(function(e) {
e.preventDefault();
$($(this).get(0).hash + ' .hint').trigger('click');
});
});
Извините, что так долго тянул, но я использовал нижеприведенный. Есть недостатки? См. Функцию открытия ...
источник
$('.ui-widget-overlay').bind('click', function () { $(this).siblings('.ui-dialog').find('.ui-dialog-content').dialog('close'); });
Забудьте об использовании другого плагина:
Вот 3 метода закрытия диалогового окна пользовательского интерфейса jquery при нажатии за пределами всплывающего окна:
Если диалоговое окно является модальным / имеет наложение фона: http://jsfiddle.net/jasonday/6FGqN/
Если диалог не модальный Метод 1: метод 1: http://jsfiddle.net/jasonday/xpkFf/
Немодальный диалог, метод 2: http://jsfiddle.net/jasonday/eccKr/
источник
open : function () { $('.ui-widget-overlay').on('click', function () { $(this).parents("body").find(".ui-dialog-content").dialog("close"); }); }
click.myNamespace
Просто добавьте этот глобальный скрипт, который закрывает все модальные диалоги, просто щелкая за их пределами.
источник
$(document).on('click', '.ui-widget-overlay', function() { $('#'+$('.ui-dialog-content')[0].id).dialog('close'); });
Скрипка, показывающая приведенный выше код в действии.
источник
Пришлось сделать две части. Сначала внешний обработчик кликов:
Это вызывает
dialog('close')
общийui-dialog-content
класс и поэтому закроет все диалоговые окна, если щелчок не произошел в одном из них. Он также будет работать с модальными диалоговыми окнами, поскольку оверлей не является частью.ui-dialog
блока.Проблема в:
Чтобы исправить это, мне пришлось добавить stopPropagation к этим обработчикам кликов:
источник
$('body').on('click', '.ui-widget-overlay', function () { $('#myDialog').dialog('close'); });
Этот вопрос немного устарел, но в случае, если кто-то хочет закрыть диалоговое окно, которое НЕ является модальным, когда пользователь где-то щелкает, вы можете использовать его, который я взял из плагина JQuery UI Multiselect . Основное преимущество в том, что клик не «теряется» (если пользователь хочет нажать на ссылку или кнопку, действие будет выполнено).
источник
var $dialog = $(this).dialog('widget');
внутрь обработчика событий по щелчкуВы можете сделать это без использования дополнительных плагинов.
Здесь $ dialog - это диалог. По сути, мы получаем последний виджет наложения при каждом открытии этого диалогового окна и привязываем обработчик кликов к этому наложению, чтобы закрыть диалоговое окно $, как при каждом щелчке на наложении.
источник
нет необходимости в плагине внешних событий ...
просто добавьте обработчик событий в div .ui-widget-overlay:
просто убедитесь, что любой селектор, который вы использовали для диалогового окна jQuery ui, также вызывается, чтобы закрыть его .. т.е. # ui-dialog-selector-go-here
источник
При этом не используется пользовательский интерфейс jQuery, но используется jQuery, что может быть полезно для тех, кто по какой-либо причине не использует пользовательский интерфейс jQuery. Сделайте это так:
Итак, как только я показал диалоговое окно, я добавляю обработчик кликов, который ищет только первый щелчок по чему-либо.
Было бы лучше, если бы я мог заставить его игнорировать щелчки по чему-либо в #dialog и его содержимом, но когда я попытался переключить $ ('*') на $ (': not ("# dialog, # dialog *") '), он по-прежнему обнаруживал # диалоговых кликов.
В любом случае, я использовал это исключительно для фото-лайтбокса, так что с этой целью он работал нормально.
источник
В данном примере (-ах) используется один диалог с идентификатором '#dialog', мне нужно было решение, которое закрывает любой диалог:
Спасибо моему коллеге Юри Аркестейну за предложение использовать прототип.
источник
Это единственный метод, который работал у меня в НЕМОДАЛЬНОМ диалоге.
Вся заслуга принадлежит Axle
Click за пределами немодального диалога, чтобы закрыть
источник
Для тех, кто вас интересует, я создал общий плагин, который позволяет закрыть диалоговое окно, щелкнув за его пределами, будь то модальный или немодальный диалог. Он поддерживает один или несколько диалогов на одной странице.
Дополнительная информация здесь: http://www.coheractio.com/blog/closing-jquery-ui-dialog-widget-when-clicking-outside
Laurent
источник
Я использую это решение на основе одного из размещенных здесь:
источник
У меня была такая же проблема при создании модального предварительного просмотра на одной странице. После долгих поисков в Google я нашел это очень полезное решение. С помощью события и цели он проверяет, где произошло нажатие, и в зависимости от этого запускает действие или ничего не делает.
Сайт библиотеки фрагментов кода
источник
Это просто, на самом деле вам не нужны плагины, просто jquery или вы можете сделать это с помощью простого javascript.
источник
Я не думаю, что найти диалоги с использованием $ ('. Any-selector') из всей DOM так здорово.
Пытаться
Вы действительно получаете оверлей из экземпляра диалога, которому он принадлежит, так никогда не пойдет не так.
источник
С помощью следующего кода вы можете имитировать щелчок по кнопке «закрыть» диалогового окна (измените строку «MY_DIALOG» на имя вашего собственного диалога)
источник
Умный код: я использую следующий код, чтобы все оставалось ясным и читаемым. out side body закроет диалоговое окно.
источник
В итоге я использовал этот код, который должен работать с любыми открытыми диалогами на странице, игнорировать щелчки по всплывающим подсказкам, а также очищать ресурсы закрываемого диалога.
источник