Mam okno dialogowe interfejsu użytkownika jQuery, które jest wyświetlane po kliknięciu określonych elementów. Chciałbym zamknąć okno dialogowe, jeśli kliknięcie nastąpi w innym miejscu niż te elementy wyzwalające lub samo okno dialogowe.
Oto kod otwierający okno dialogowe:
$(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');
});*/
});
Jeśli odkomentuję ostatnią część, okno dialogowe nigdy się nie otworzy. Zakładam, że dzieje się tak, ponieważ to samo kliknięcie, które otwiera okno dialogowe, powoduje jego ponowne zamknięcie.
Końcowy kod roboczy
Uwaga: to jest użycie wtyczki jQuery zdarzenia zewnętrzne
$(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');
});
});
Przepraszam, że przeciągam to po tak długim czasie, ale użyłem poniższego. Jakieś wady? Zobacz funkcję open ...
źródło
$('.ui-widget-overlay').bind('click', function () { $(this).siblings('.ui-dialog').find('.ui-dialog-content').dialog('close'); });
Zapomnij o używaniu innej wtyczki:
Oto 3 metody zamykania okna dialogowego interfejsu użytkownika jquery po kliknięciu poza popinem:
Jeśli okno dialogowe jest modalne / ma nakładkę w tle: http://jsfiddle.net/jasonday/6FGqN/
Jeśli okno dialogowe jest niemodalne Metoda 1: metoda 1: http://jsfiddle.net/jasonday/xpkFf/
Niemodalna metoda dialogu 2: http://jsfiddle.net/jasonday/eccKr/
źródło
open : function () { $('.ui-widget-overlay').on('click', function () { $(this).parents("body").find(".ui-dialog-content").dialog("close"); }); }
click.myNamespace
Po prostu dodaj ten globalny skrypt, który zamyka wszystkie okna dialogowe po prostu klikając je poza nimi.
źródło
$(document).on('click', '.ui-widget-overlay', function() { $('#'+$('.ui-dialog-content')[0].id).dialog('close'); });
Fiddle pokazujący powyższy kod w akcji.
źródło
Musiałem zrobić dwie części. Najpierw zewnętrzny moduł obsługi kliknięcia:
Spowoduje to wywołanie klasy
dialog('close')
ogólnejui-dialog-content
i zamknie wszystkie okna dialogowe, jeśli kliknięcie nie nastąpiło w żadnym z nich. Będzie działać również z modalnymi oknami dialogowymi, ponieważ nakładka nie jest częścią.ui-dialog
pola.Problemem jest:
Aby to naprawić, musiałem dodać stopPropagation do tych programów obsługi kliknięć:
źródło
$('body').on('click', '.ui-widget-overlay', function () { $('#myDialog').dialog('close'); });
To pytanie jest trochę stare, ale w przypadku, gdy ktoś chce zamknąć okno dialogowe, które NIE jest modalne, gdy użytkownik gdzieś kliknie, możesz użyć tego, które wziąłem z wtyczki JQuery UI Multiselect . Główną zaletą jest to, że kliknięcie nie jest „gubione” (jeśli użytkownik chce kliknąć link lub przycisk, akcja jest wykonywana).
źródło
var $dialog = $(this).dialog('widget');
do programu obsługi zdarzeń on-clickMożesz to zrobić bez używania dodatkowej wtyczki
Tutaj $ dialog jest oknem dialogowym. Zasadniczo robimy to, aby uzyskać ostatni widżet nakładki za każdym razem, gdy otworzy się to okno dialogowe, i powiązać moduł obsługi kliknięcia z tą nakładką, aby zamknąć okno dialogowe $ dialog za każdym razem, gdy nakładka zostanie kliknięta.
źródło
nie ma potrzeby korzystania z wtyczki wydarzeń zewnętrznych ...
po prostu dodaj procedurę obsługi zdarzeń do elementu div .ui-widget-overlay:
po prostu upewnij się, że dowolny selektor, którego użyłeś w oknie dialogowym jQuery ui, jest również wywoływany, aby je zamknąć .. tj. # ui-dialog-selector-go-here
źródło
To nie używa interfejsu użytkownika jQuery, ale używa jQuery i może być przydatne dla tych, którzy z jakiegokolwiek powodu nie używają interfejsu użytkownika jQuery. Zrób to tak:
Po wyświetleniu okna dialogowego dodaję moduł obsługi kliknięcia, który szuka tylko pierwszego kliknięcia.
Teraz byłoby lepiej, gdybym mógł zmusić go do ignorowania kliknięć czegokolwiek w #dialog i jego zawartości, ale kiedy próbowałem przełączyć $ ('*') na $ (': not ("# dialog, # dialog *") '), nadal wykrywał # kliknięć dialogów.
W każdym razie używałem tego wyłącznie do foto lightboxa, więc działało dobrze w tym celu.
źródło
Podany przykład (y) używa jednego okna dialogowego o identyfikatorze '#dialog', potrzebowałem rozwiązania, które zamknie każde okno dialogowe:
Dziękuję mojemu koledze Youri Arkesteijn za sugestię użycia prototypu.
źródło
To jedyna metoda, która zadziałała w moim przypadku w przypadku mojego NIEMODALNEGO okna dialogowego
Cały zasługa należy przypisać Axle
Click poza dialogiem niemodalnym, aby zamknąć
źródło
Dla zainteresowanych stworzyłem ogólną wtyczkę, która umożliwia zamknięcie okna dialogowego po kliknięciu poza nim, niezależnie od tego, czy jest to okno modalne, czy niemodalne. Obsługuje jedno lub wiele okien dialogowych na tej samej stronie.
Więcej informacji tutaj: http://www.coheractio.com/blog/closing-jquery-ui-dialog-widget-when-clicking-outside
Laurent
źródło
Korzystam z tego rozwiązania na podstawie jednego zamieszczonego tutaj:
źródło
Miałem ten sam problem podczas tworzenia podglądu modalnego na jednej stronie. Po wielu googlach znalazłem to bardzo przydatne rozwiązanie. W przypadku zdarzenia i celu sprawdza, gdzie nastąpiło kliknięcie iw zależności od tego, czy wyzwala akcję, czy nic nie robi.
Witryna biblioteki fragmentów kodu
źródło
To proste, w rzeczywistości nie potrzebujesz żadnych wtyczek, po prostu jquery lub możesz to zrobić za pomocą prostego javascript.
źródło
Nie sądzę, aby znajdowanie elementów dialogowych za pomocą $ ('. Any-selector') z całego DOM było takie jasne.
Próbować
Naprawdę otrzymujesz nakładkę z instancji okna dialogowego, do którego należy, nic nie pójdzie źle w ten sposób.
źródło
Za pomocą poniższego kodu możesz zasymulować kliknięcie przycisku „zamknij” w oknie dialogowym (zmień ciąg „MY_DIALOG” na nazwę własnego okna dialogowego)
źródło
Inteligentny kod: używam następującego kodu, aby wszystko było jasne i czytelne. korpus zewnętrzny zamyka okno dialogowe.
źródło
Skończyło się na tym, że użyłem tego kodu, który powinien działać na wszystkich otwartych oknach dialogowych na stronie, ignorować kliknięcia etykietek narzędzi i czyścić zasoby zamykanego okna dialogowego.
źródło