Ich habe ein jQuery-UI-Dialogfeld, das angezeigt wird, wenn auf bestimmte Elemente geklickt wird. Ich möchte den Dialog schließen, wenn ein Klick irgendwo anders als auf diesen auslösenden Elementen oder im Dialog selbst auftritt.
Hier ist der Code zum Öffnen des Dialogs:
$(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');
});*/
});
Wenn ich den letzten Teil auskommentiere, wird der Dialog nie geöffnet. Ich gehe davon aus, dass derselbe Klick, der den Dialog öffnet, ihn wieder schließt.
Endgültiger Arbeitscode
Hinweis: Hierbei wird das jQuery- Plugin für externe Ereignisse verwendet
$(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');
});
});
Es tut mir leid, das nach so langer Zeit nach oben zu ziehen, aber ich habe das Folgende verwendet. Irgendwelche Nachteile? Siehe die Öffnungsfunktion ...
quelle
$('.ui-widget-overlay').bind('click', function () { $(this).siblings('.ui-dialog').find('.ui-dialog-content').dialog('close'); });
Vergessen Sie die Verwendung eines anderen Plugins:
Hier sind 3 Methoden, um ein jquery-UI-Dialogfeld zu schließen, wenn Sie außerhalb des Popins klicken:
Wenn der Dialog modal ist / Hintergrundüberlagerung hat: http://jsfiddle.net/jasonday/6FGqN/
Wenn der Dialog nicht modal ist Methode 1: Methode 1: http://jsfiddle.net/jasonday/xpkFf/
Nichtmodaler Dialog Methode 2: http://jsfiddle.net/jasonday/eccKr/
quelle
open : function () { $('.ui-widget-overlay').on('click', function () { $(this).parents("body").find(".ui-dialog-content").dialog("close"); }); }
click.myNamespace
Fügen Sie einfach dieses globale Skript hinzu, das alle modalen Dialoge schließt, indem Sie auf sie klicken.
quelle
$(document).on('click', '.ui-widget-overlay', function() { $('#'+$('.ui-dialog-content')[0].id).dialog('close'); });
Geige zeigt den obigen Code in Aktion.
quelle
Ich musste zwei Teile machen. Zuerst der externe Click-Handler:
Dies ruft
dialog('close')
die generischeui-dialog-content
Klasse auf und schließt so alle Dialoge, wenn der Klick nicht von einem stammt. Es funktioniert auch mit modalen Dialogen, da die Überlagerung nicht Teil der.ui-dialog
Box ist.Das Problem ist:
Um dies zu beheben, musste ich diesen Klick-Handlern stopPropagation hinzufügen:
quelle
$('body').on('click', '.ui-widget-overlay', function () { $('#myDialog').dialog('close'); });
Diese Frage ist etwas alt, aber falls jemand einen Dialog schließen möchte, der NICHT modal ist, wenn der Benutzer irgendwo klickt, können Sie diese verwenden, die ich aus dem JQuery UI Multiselect-Plugin übernommen habe . Der Hauptvorteil ist, dass der Klick nicht "verloren" geht (wenn der Benutzer auf einen Link oder eine Schaltfläche klicken möchte, wird die Aktion ausgeführt).
quelle
var $dialog = $(this).dialog('widget');
innerhalb des On-Click-Event-Handlers bewegenSie können dies ohne zusätzliches Plug-In tun
Hier ist $ dialog der Dialog. Grundsätzlich rufen wir das letzte Overlay-Widget auf, wenn dieses Dialogfeld geöffnet wird, und binden einen Klick-Handler an dieses Overlay, um das $ -Dialogfeld zu schließen, sobald auf das Overlay geklickt wird.
quelle
Das Plugin für externe Ereignisse ist nicht erforderlich ...
Fügen Sie einfach einen Ereignishandler zum .ui-Widget-Overlay-Div hinzu:
Stellen Sie einfach sicher, dass der für den jQuery-UI-Dialog verwendete Selektor auch aufgerufen wird, um ihn zu schließen. Das heißt, # ui-dialog-selector-goes-here
quelle
Dies verwendet nicht die jQuery-Benutzeroberfläche, sondern jQuery und kann für diejenigen nützlich sein, die die jQuery-Benutzeroberfläche aus irgendeinem Grund nicht verwenden. Mach es so:
Sobald ich ein Dialogfeld angezeigt habe, füge ich einen Klick-Handler hinzu, der nur nach dem ersten Klick auf etwas sucht.
Jetzt wäre es schöner, wenn ich es dazu bringen könnte, Klicks auf irgendetwas in #dialog und dessen Inhalt zu ignorieren, aber als ich versuchte, $ ('*') durch $ (': not ("# dialog, # dialog *") zu wechseln '), es wurden immer noch #dialog-Klicks erkannt.
Wie auch immer, ich habe dies nur für einen Foto-Leuchtkasten verwendet, also hat es für diesen Zweck in Ordnung funktioniert.
quelle
Die angegebenen Beispiele verwenden einen Dialog mit der ID '#dialog'. Ich brauchte eine Lösung, die jeden Dialog schließt:
Vielen Dank an meinen Kollegen Youri Arkesteijn für den Vorschlag, einen Prototyp zu verwenden.
quelle
Dies ist die einzige Methode, die für mich in meinem NICHT-MODAL-Dialog funktioniert hat
Das gesamte Guthaben geht an Axle.
Klicken Sie zum Schließen außerhalb des nicht modalen Dialogfelds
quelle
Für diejenigen, die interessiert sind, habe ich ein generisches Plugin erstellt, mit dem Sie einen Dialog schließen können, wenn Sie außerhalb davon klicken, unabhängig davon, ob es sich um einen modalen oder einen nicht modalen Dialog handelt. Es unterstützt einen oder mehrere Dialoge auf derselben Seite.
Weitere Informationen hier: http://www.coheractio.com/blog/closing-jquery-ui-dialog-widget-when-clicking-outside
Laurent
quelle
Ich verwende diese Lösung basierend auf einer hier veröffentlichten:
quelle
Ich hatte das gleiche Problem, als ich die Vorschau auf einer Seite modal machte. Nach vielem googeln fand ich diese sehr nützliche Lösung. Mit Ereignis und Ziel wird überprüft, wo das Klicken stattgefunden hat, und abhängig davon wird die Aktion ausgelöst oder es wird nichts unternommen.
Code Snippet Library Site
quelle
Es ist ganz einfach, eigentlich brauchst du keine Plugins, nur jquery oder du kannst es mit einfachem Javascript machen.
quelle
Ich denke nicht, dass es so hell ist, Dialogmaterial mit $ ('. Any-selector') aus dem gesamten DOM zu finden.
Versuchen
Sie erhalten das Overlay wirklich von der Dialoginstanz, zu der es gehört. Auf diese Weise wird nichts schief gehen.
quelle
Mit dem folgenden Code können Sie einen Klick auf die Schaltfläche "Schließen" des Dialogfelds simulieren (ändern Sie die Zeichenfolge "MY_DIALOG" für den Namen Ihres eigenen Dialogfelds).
quelle
Smart Code: Ich verwende folgenden Code, damit alles klar und lesbar bleibt. out side body schließt das Dialogfeld.
quelle
Am Ende habe ich diesen Code verwendet, der für alle geöffneten Dialoge auf der Seite funktionieren sollte, Klicks auf QuickInfos ignoriert und die Ressourcen des zu schließenden Dialogs bereinigt.
quelle