Wie schließt man ein jQuery UI modal-dialog, indem Sie außerhalb der Bereich, der durch die box?

Bin ich mit Hilfe von jQuery 1.6 und jQuery UI. Ich erfolgreich eine modal-dialog Fenster mit der Breite fast 50% meiner Anwendung web-Seite' der Breite. Ich möchte dem Benutzer ein anderer Weg, um das Dialogfeld zu schließen so, dass, wenn er\Sie auf eine Stelle außerhalb des abgedeckten Bereichs auf der Seite von "modal box", diese wird geschlossen, wenn der Benutzer klickte auf den "standard" - "x"-Schaltfläche oben rechts.

Wie kann ich das tun?

InformationsquelleAutor Backo | 2011-09-09
  1. 5

    Zu klären, die Antwort von Victor funktioniert nur, wenn der dialog wird festgelegt autoOpen: true wird, ist der Standardwert der dialog, und Sie nicht öffnen Sie den dialog wieder mit einem Ereignis. Wenn Sie öffnen Sie den dialog mit einem Ereignis wie click zu jedem Punkt, ob autoOpen eingestellt ist true oder false, dann müssen Sie jQuery.live.

    Geige demonstrieren scheitern overlay click Veranstaltung mit autoOpen: false: http://jsfiddle.net/GKfZM/

    Geige, die zeigen, wie live arbeitet mit autoOpen: false und mit click Veranstaltung: http://jsfiddle.net/GKfZM/1/

    Zusammenfassung: Victor ' s Antwort funktioniert nur unter bestimmten Bedingungen.

    Tutorial link

    • beachten Sie thant live() ist veraltet, da jQuery in der version 1.7, die Sie verwenden sollten on() statt.
    InformationsquelleAutor jk.
  2. 10

    Update

    Dies war die erste Antwort:

    $(".ui-widget-overlay").click (function () {
     $("#your-dialog-id").dialog( "close" );
});

    Dies ist die funktionierende Lösung:

    $('.ui-widget-overlay').live('click', function() {
     $('#your-dialog-id').dialog( "close" );
});
    • In meinem Fall sollte ich verwenden jQuery.live Methode. Danke.
    • Siehe die andere Antwort mit der richtigen Lösung.
    InformationsquelleAutor Victor
  3. 5

    Wie über diesen Weg，auf diese Weise können Sie den dialog schließen, was ihn zu öffnen, von wo und welche id. Es ist eine Globale Funktion:

       $("body").on("click",".ui-widget-overlay",function() {
     $(".ui-dialog-titlebar-close").click();
   });
    InformationsquelleAutor Ken
  4. 1

    Haben Sie zwei Optionen für das Modell schließen Dialogfeld

    $('#your-dialog-id').modal('toggle');

    ODER

    können Sie das click-Ereignis direkt, wenn Sie klicken Sie außerhalb der box

    $("#your-dialog-id .close").click()
    InformationsquelleAutor Nikunj K.
Schreibe einen Kommentar