webentwicklung-frage-antwort-db.com.de

Dialog schließen mit Klick (irgendwo)

Gibt es eine Standardoption, um ein jQuery-Dialogfeld zu schließen, indem Sie anstelle des Schließsymbols irgendwo auf den Bildschirm klicken?

jqueryjquery-uidialogmodal-dialog
50
Fuxi

Bearbeiten: Hier ist ein Plugin, das ich erstellt habe und das den jQuery-UI-Dialog um .__ erweitert. Schließen beim Klicken außerhalb und weitere Funktionen: https://github.com/jasonday/jQuery-UI-Dialog-extended

Es gibt 3 Methoden, um ein Jquery-UI-Dialogfeld zu schließen, wenn Sie auf ein Pop-Out außerhalb klicken:

Wenn der Dialog modal ist/Hintergrund-Overlay hat: http://jsfiddle.net/jasonday/6FGqN/

jQuery(document).ready(function() {
    jQuery("#dialog").dialog({
        bgiframe: true,
        autoOpen: false,
        height: 100,
        modal: true,
        open: function() {
            jQuery('.ui-widget-overlay').bind('click', function() {
                jQuery('#dialog').dialog('close');
            })
        }
    });
});

Wenn das Dialogfeld nicht modal ist, Methode 1: http://jsfiddle.net/jasonday/xpkFf/

// Close Pop-in If the user clicks anywhere else on the page
jQuery('body')
    .bind('click', function(e) {
        if(jQuery('#dialog').dialog('isOpen')
            && !jQuery(e.target).is('.ui-dialog, a')
            && !jQuery(e.target).closest('.ui-dialog').length
        ) {
            jQuery('#dialog').dialog('close');
        }
    });

Nichtmodaler Dialog Methode 2: http://jsfiddle.net/jasonday/eccKr/

$(function() {
    $('#dialog').dialog({
        autoOpen: false, 
        minHeight: 100,
        width: 342,
        draggable: true,
        resizable: false,
        modal: false,
        closeText: 'Close',
        open: function() {
            closedialog = 1;
            $(document).bind('click', overlayclickclose); },
        focus: function() { 
            closedialog = 0; },
        close: function() { 
            $(document).unbind('click'); }
    });

    $('#linkID').click(function() {
        $('#dialog').dialog('open');
        closedialog = 0;
    });

    var closedialog;

    function overlayclickclose() {
        if (closedialog) {
            $('#dialog').dialog('close');
        }
        //set to one because click on dialog box sets to zero
        closedialog = 1;
    }
});
124
Jason

Beim Erstellen eines JQuery-Dialogfensters fügt JQuery eine Ui-Widget-Overlay-Klasse ein. Wenn Sie eine Klick-Funktion an diese Klasse binden, um das Dialogfeld zu schließen, sollte sie die gewünschte Funktionalität bereitstellen.

Code wird ungefähr so ​​aussehen (ungeprüft):

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

Edit: Folgendes wurde auch für Kendo getestet:

$('.k-overlay').click(function () {
            var popup = $("#dialogId").data("kendoWindow");
            if (popup)
                popup.close();
        });
17
jgallant

Wenn Sie mehrere Dialoge haben, die auf einer Seite geöffnet werden können, können Sie alle durch Klicken auf den Hintergrund schließen.

$('body').on('click','.ui-widget-overlay', function() {
    $('.ui-dialog').filter(function () {
    return $(this).css("display") === "block";
    }).find('.ui-dialog-content').dialog('close');
});

(Funktioniert nur für modale Dialoge, da sie auf '.ui-widget-overlay' angewiesen ist. Außerdem schließt sie all open-Dialoge, wenn der Hintergrund eines von ihnen angeklickt wird.)

8
jackadams49

Wenn Sie dies für alle Dialoge auf der Site tun möchten, versuchen Sie den folgenden Code ...

$.extend( $.ui.dialog.prototype.options, { 
    open: function() {
        var dialog = this;
        $('.ui-widget-overlay').bind('click', function() {
            $(dialog).dialog('close');
        });
    }   

});
7
DaWolf

Dieser Beitrag kann helfen:

http://www.jensbits.com/2010/06/16/jquery-modal-dialog-close-on-overlay-click/

Siehe auch Wie schließt man ein modales Dialogfeld für eine jQuery-Benutzeroberfläche, indem Sie außerhalb des Bereichs klicken, der von der Box abgedeckt wird? zur Erläuterung, wann und wie overlay Klick oder Live-Ereignis angewendet werden soll, je nachdem, wie Sie den Dialog auf der Seite verwenden.

6
jk.

In manchen Fällen ist Jasons Antwort übertrieben. Und $('.ui-widget-overlay').click(function(){ $("#dialog").dialog("close"); }); arbeitet nicht immer mit dynamischen Inhalten.

Die Lösung, die ich in allen Fällen als funktioniere, ist:

$('body').on('click','.ui-widget-overlay',function(){ $('#dialog').dialog('close'); });
5
neokio

Wenn der Code der vorherigen Beiträge nicht funktioniert, probieren Sie es aus:

$("a.ui-dialog-titlebar-close")[0].click();
1
perkas

Ein bisschen spät, aber dies ist eine Lösung, die für mich funktioniert hat. Perfekt, wenn sich Ihr Modal im Overlay-Tag befindet. Das Modal wird also geschlossen, wenn Sie auf eine Stelle außerhalb des modalen Inhalts klicken.

HTML

<div class="modal">  
  <div class="overlay">
    <div class="modal-content">
      <p>HELLO WORLD!</p>
    </div>
  </div>
</div>

JS

$(document).on("click", function(event) {
  if ($(event.target).has(".modal-content").length) {
    $(".modal").hide();
  }
});

Hier ist ein Arbeitsbeispiel

0
dragoeco

Versuche dies:

$(".ui-widget-overlay").click(function () {
    $(".ui-icon.ui-icon-closethick").trigger("click");
});
0
Stepan Tripal

Angesichts des gleichen Problems habe ich ein kleines Plugin erstellt, das das Schließen eines Dialogfelds ermöglicht, wenn Sie außerhalb des Fensters klicken, ob es sich um ein modales oder ein nicht-modales Dialogfeld handelt. Es unterstützt ein oder mehrere Dialoge auf derselben Seite.

Weitere Informationen auf meiner Website finden Sie hier: http://www.coheractio.com/blog/closing-jquery-ui-dialog-widget-when-clicking-outside

Laurent

0
Laurent