jQuery-UI-1.7.1 Modal Schließen auf Overlay Klicken

Ich versuche, die das Standardverhalten überschreiben, jQuery UI modal-Dialogfeld, um das Dialogfeld zu schließen, wenn das overlay geklickt wird. Den code habe ich unten das Dialogfeld zu schließen, nachdem ich es öffnen zum ersten mal, und klicken Sie auf das overlay. Wenn ich öffnen Sie das Dialogfeld erneut, indem Sie auf das overlay macht nichts. Mir fehlt eine Veranstaltung hier. Kann mir jemand erklären, was mache ich hier falsch?

Dank!

$(function(){

        $('#production_schedule_dialog').dialog({
            autoOpen: false,
            width: 570,
            modal: true,
            closeOnEscape: true
        }); 

        $('#production_schedule_dialog_link').click(function(){
            $('#production_schedule_dialog').dialog('open');
            return false;
        });

        $(document).bind('click', dialogBlur);
});


var dialogBlur = function(event){
    var target = $(event.target);
    if (target.is('.ui-dialog') || target.parents('.ui-dialog').length) {
        return;
    }

    $('.ui-dialog:visible').find('.ui-dialog-titlebar-close').trigger('click');

    $(document).unbind('click', dialogBlur);
}
InformationsquelleAutor mattmac | 2009-07-07
  1. 15

    Einfachste Weg, es zu tun:
    http://www.ryanjeffords.com/blog/entry/closing-a-jquery-ui-dialog-when-the-dialog-loses-focus

    Fügen Sie diese:

    $('.ui-widget-overlay').live("click", function() {
    //Close the dialog
    $("#dialog").dialog("close");
});
    • .live() ist veraltet, verwenden .auf() statt.
    • aktualisierte Antwort hier: stackoverflow.com/a/10353694/124486
    • Dieser ist nicht erweiterbar, um mehrere Dialoge auf einer Seite.
    • es ist.
    • IDs sind einzigartig. Es ist nicht.
    • Es können mehrere Dialoge auf einzelne Seite mit verschiedenen id ' s. So können Sie den dialog schließen mit einer solchen id.

    InformationsquelleAutor Paul
  2. 10

    Paul ' s Lösung funktioniert gut, wenn Sie eine alte version von jQuery (pre-1.7). Jetzt .live() veraltet ist obwohl. Versuchen Sie es mit on() statt.

    $('.ui-widget-overlay').on("click", function() {
    //Close the dialog
    $(this).find(".dialog").dialog("close");
});
    • Die '.ui-widget-übermäßig' ist dynamisch angelegt. Sie müssen sicher sein, dass das element vorhanden ist, bevor Sie das hinzufügen dieser Zeilen. Ein besserer Ansatz wäre, die Veranstaltung auf dem Dokument: $(document).on('click', function() { $('.dialog').dialog("close"); });
    • Ja, .ui-widget-overly wird dynamisch erstellt, so dass dieser code nicht unbedingt gebunden werden, wenn erforderlich. Ich habe dieses Problem gelöst, indem es innerhalb der open() Ereignis des dialogs, so bindet es NACH .ui-widget-overly erstellt. Die Zuordnung eines click Ereignis, um das gesamte Dokument kann ein bisschen overkill.
    InformationsquelleAutor Evan Carroll
  3. 4

    Ich bin mir nicht sicher, warum dein code nicht funktioniert, aber ich nahm es, modifiziert es, und bekam eine version, die zu funktionieren scheint, da sowohl Sie als auch ich möchten:

    var openDialogWindow = function(dialogId)
 {

     $(dialogId).dialog('open');
     $(".ui-widget-overlay").bind("click", closeDialogWindowOnOverlayClick);
 }

 var closeDialogWindowOnOverlayClick = function(event){
     var closeButton = $(".ui-dialog:visible").find(".ui-dialog-titlebar-close");
     closeButton.trigger("click");
     $(".ui-widget-overlay").unbind("click", closeDialogWindowOnOverlayClick);
 }

    Der große Unterschied hier ist, dass ich mich verbindlich dialog-schließen-Logik zu Klicks auf die JQuery-overlay-Objekt (statt des Dokuments, wie Sie sind). Und ich weiß die Verbindlichkeit, wenn sich der dialog öffnet und unverbindlich, wenn der dialog geschlossen. Nicht wirklich notwendig, aber es hält die Dinge sauber.

    Egal, danke für die inspiration.

    • Ich habe versucht, wie 5 verschiedene Möglichkeiten, dies ist die einzige, die ich in der Lage war, zu arbeiten (und saubersten) durch das Dialogfeld, built-in 'offene' Veranstaltung. Definierte ich ein defaultDialogOptions variable mit $(".ui-widget-overlay").bind("click", closeDialogWindowOnOverlayClick); in der "offenen" Ereignis-callback und ich leite alle meine Website-übergreifende Dialoge aus diese Einstellung aka $('<div></div>').dialog($.extend({}, defualtSettings, { /*spezifische Einstellungen*/ })); Funktioniert wunderbar. Danke!
    InformationsquelleAutor Michael Scepaniak
  4. 3

    Beste Weg, es zu tun : 

    $('body').on("click", ".ui-widget-overlay", function() {
        $("#dialog").dialog("close");
    });
    • Warum nicht einfach den event zu .ui-widget-overlay? Warum sind Sie erstellen ein Ereignis, das dauerhaft fest an den Körper für etwas, das nicht dauerhaft dort?
    • da ui-widget-overlay dynamisch erstellt, wenn Sie es an den Körper ist nicht eine gute Idee, entweder
    InformationsquelleAutor Jonathan
  5. 1

    suchen, bei deinem Beispiel sieht es aus wie Sie sind unverbindlich, die Veranstaltung und nicht die Einstellung zu sichern.

    versuchen Sie, Ihre bind-Aufruf:

        $('#production_schedule_dialog_link').click(function(){
            $('#production_schedule_dialog').dialog('open');
            $(document).bind('click', dialogBlur);
            return false;
    });

    sollte rebind Ihre Unschärfe Zuhörer jedes mal, wenn das Dialogfeld geöffnet ist.

    InformationsquelleAutor daniellmb
  6. 1

    Wenn Seite enthält nur wenige Dialoge, Sie können mit dieser universellen Methode:

    $(document).on('click', '.ui-widget-overlay', function() {
  var $dialog = $(this).siblings('.ui-dialog:visible')
    .find('.ui-dialog-content');
  if ($dialog.length && $dialog.dialog('isOpen')) {
    $dialog.dialog('close');
  }
});
    • Ersetzen Sie einfach "Geschwister" mit "weiter" und es wird die Arbeit mit mehreren geöffneten Dialogen zu..
    • Das ist genau das was ich brauchte. Ich habe viele verschiedene Typen von Dialogfeld, so dass das hinzufügen von code zu jeder schien albern. Dies sollte die top-Antwort! Ziemlich viel paste-and-go. Danke, geheimnisvoll-Punkt " anonymer Benutzer!
    InformationsquelleAutor user2749416
  8. 0

    So viele komplizierte Antworten... hier ist eine einfache, wiederverwendbare ein.

    $('.ui-widget-overlay').live('click', function(event)
{
    $(this).prev().find('div:nth-child(2)').dialog('close');
});
    • .live ist veraltet
    InformationsquelleAutor Kevin Miller
Schreibe einen Kommentar