jQuery-Benutzeroberfläche - Schließen-Dialogfeld, wenn außerhalb geklickt wird

Tut mir leid, dass ich das nach so langer Zeit nach oben gezogen habe, aber ich habe das unten verwendet. Irgendwelche nachteile? Öffnen Sie die Funktion ...

$("#popup").dialog(
{
    height: 670,
    width: 680,
    modal: true,
    autoOpen: false,
    close: function(event, ui) { $('#wrap').show(); },
    open: function(event, ui) 
    { 
        $('.ui-widget-overlay').bind('click', function()
        { 
            $("#popup").dialog('close'); 
        }); 
    }
});

Vergessen Sie die Verwendung eines anderen Plugins:

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: 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;
          }


  });

Fügen Sie einfach dieses globale Skript hinzu, das alle modalen Dialogfelder schließt, indem Sie darauf klicken.

$(document).ready(function()
{
    $(document.body).on("click", ".ui-widget-overlay", function()
    {
        $.each($(".ui-dialog"), function()
        {
            var $dialog;
            $dialog = $(this).children(".ui-dialog-content");
            if($dialog.dialog("option", "modal"))
            {
                $dialog.dialog("close");
            }
        });
    });;
});

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

Fiddle zeigt den obigen Code in Aktion. 

Ich musste zwei Teile machen. Zuerst der äußere Click-Handler:

$(document).on('click', function(e){
    if ($(".ui-dialog").length) {
        if (!$(e.target).parents().filter('.ui-dialog').length) {
            $('.ui-dialog-content').dialog('close');
        }
    }
}); 

Dies ruft dialog('close') für die generische ui-dialog-content-Klasse auf und schließt so die Dialogfelder all, wenn der Klick nicht in einem der beiden entstanden ist. Es funktioniert auch mit modalen Dialogen, da die Überlagerung nicht Teil der .ui-dialog-Box ist.

Das Problem ist:

1. Die meisten Dialoge werden aufgrund von Klicks außerhalb eines Dialogs erstellt
2. Dieser Handler wird ausgeführt, nachdem diese Klicks einen Dialog erstellt und zum Dokument gesprudelt haben, so dass er sofort geschlossen wird.

Um das zu beheben, musste ich stopPropagation zu diesen Klick-Handlern hinzufügen:

moreLink.on('click', function (e) {
    listBox.dialog();
    e.stopPropagation(); //Don't trigger the outside click handler
});

Sie können dies ohne zusätzliches Plug-In tun

var $dialog= $(document.createElement("div")).appendTo(document.body);
    var dialogOverlay;

    $dialog.dialog({
        title: "Your title",
        modal: true,
        resizable: true,
        draggable: false,
        autoOpen: false,
        width: "auto",
        show: "fade",
        hide: "fade",
        open:function(){
            $dialog.dialog('widget').animate({
                width: "+=300", 
                left: "-=150"
            });

//get the last overlay in the dom
            $dialogOverlay = $(".ui-widget-overlay").last();
//remove any event handler bound to it.
            $dialogOverlay.unbind();
            $dialogOverlay.click(function(){
//close the dialog whenever the overlay is clicked.
                $dialog.dialog("close");
            });
        }
    });

Hier ist $ dialog das Dialogfeld . Im Grunde erhalten wir immer das letzte Overlay-Widget, wenn dieses Dialogfeld geöffnet wird, und binden einen Click-Handler an dieses Overlay, um das $ -Dialogfeld zu schließen, sobald das Overlay angeklickt wird.

Diese Frage ist etwas alt, aber falls jemand ein Dialogfenster schließen möchte, das NICHT modal ist, wenn der Benutzer irgendwo klickt, können Sie dieses verwenden, das ich aus dem JQuery UI Multiselect plugin genommen habe. Der Hauptvorteil besteht darin, dass der Klick nicht "verloren" ist (wenn der Benutzer auf einen Link oder eine Schaltfläche klicken möchte, wird die Aktion ausgeführt). 

$myselector.dialog({
            title: "Dialog that closes when user clicks outside",
            modal:false,
            close: function(){
                        $(document).off('mousedown.mydialog');
                    },
            open: function(event, ui) { 
                    var $dialog = $(this).dialog('widget');
                    $(document).on('mousedown.mydialog', function(e) {
                        // Close when user clicks elsewhere
                        if($dialog.dialog('isOpen') && !$.contains($myselector.dialog('widget')[0], e.target)){
                            $myselector.dialog('close');
                        }            
                    });
                }                    
            });

das Plugin für externe Events ist nicht erforderlich.

füge einfach einen Event-Handler zum .ui-Widget-Overlay-Div hinzu:

jQuery(document).on('click', 'body > .ui-widget-overlay', function(){
     jQuery("#ui-dialog-selector-goes-here").dialog("close");
     return false;
});

stellen Sie einfach sicher, dass der Selektor, den Sie für das Dialogfeld jQuery ui verwendet haben, auch zum Schließen aufgerufen wird. d. h. # ui-dialog-selector-goes-here

Dies verwendet keine jQuery-Benutzeroberfläche, sondern jQuery. Dies kann für diejenigen nützlich sein, die aus irgendeinem Grund keine jQuery-Benutzeroberfläche verwenden. Mach es so:

function showDialog(){
  $('#dialog').show();
  $('*').on('click',function(e){
    $('#zoomer').hide();
  });
}

$(document).ready(function(){

  showDialog();    

});

Sobald ich ein Dialogfeld angezeigt habe, füge ich einen Klick-Handler hinzu, der nur nach dem ersten Klick auf etwas sucht. 

Nun, es wäre schöner, wenn ich Klicks auf #dialog und dessen Inhalt ignorieren könnte, aber als ich versuche, $ ('*') mit $ (': not ("#dialog, #dialog *") '), es wurden immer noch #dialog-Klicks erkannt.

Jedenfalls habe ich das nur für eine Foto-Lightbox verwendet, also hat es gut funktioniert.

Die angegebenen Beispiele verwenden einen Dialog mit der ID '#dialog'. Ich brauchte eine Lösung, die jeden Dialog schließt:

$.extend($.ui.dialog.prototype.options, {
    modal: true,
    open: function(object) {
        jQuery('.ui-widget-overlay').bind('click', function() {              
            var id = jQuery(object.target).attr('id');
            jQuery('#'+id).dialog('close');
        })
    }
});

Vielen Dank an meinen Kollegen Youri Arkesteijn für den Vorschlag, Prototyp zu verwenden.

Ich hatte das gleiche Problem, als ich auf einer Seite eine Vorschau-Modalität erstellte. Nach vielem googeln fand ich diese sehr nützliche Lösung. Mit event und target wird geprüft, wo der Klick stattgefunden hat, und abhängig davon wird die Aktion ausgelöst oder nichts ausgeführt. 

Code Snippet Library Site

$('#modal-background').mousedown(function(e) {
var clicked = $(e.target);  
if (clicked.is('#modal-content') || clicked.parents().is('#modal-content')) 
    return; 
} else {  
 $('#modal-background').hide();
}
});

Für diejenigen, die Sie interessieren, habe ich ein generisches Plugin erstellt, mit dem Sie ein Dialogfeld schließen können, wenn Sie außerhalb des Fensters klicken, ob es sich um ein modales oder nicht-modales Dialogfeld handelt. Es unterstützt ein oder mehrere Dialoge auf derselben Seite. 

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

Laurent

Ich verwende diese Lösung in einem hier veröffentlichten Format:

var g_divOpenDialog = null;
function _openDlg(l_d) {

  // http://stackoverflow.com/questions/2554779/jquery-ui-close-dialog-when-clicked-outside
  jQuery('body').bind(
   'click',
   function(e){
    if(
      g_divOpenDialog!=null 
      && !jQuery(e.target).is('.ui-dialog, a')
      && !jQuery(e.target).closest('.ui-dialog').length
    ){
      _closeDlg();
    }
   }
  );

  setTimeout(function() {
    g_divOpenDialog = l_d;
    g_divOpenDialog.dialog();
  }, 500);
}
function _closeDlg() {
  jQuery('body').unbind('click');
  g_divOpenDialog.dialog('close');
  g_divOpenDialog.dialog('destroy');
  g_divOpenDialog = null;
}

Dies ist die einzige Methode, die für meinen NICHT MODALEN Dialog funktioniert hat

$(document).mousedown(function(e) {
    var clicked = $(e.target); // get the element clicked
    if (clicked.is('#dlg') || clicked.parents().is('#dlg') || clicked.is('.ui-dialog-titlebar')) {
        return; // click happened within the dialog, do nothing here
    } else { // click was outside the dialog, so close it
        $('#dlg').dialog("close");
    }
});

Alles Guthaben geht an Axle 
Klicken Sie außerhalb des nicht-modalen Dialogs, um zu schließen

Mit dem folgenden Code können Sie einen Klick auf die Schaltfläche "Schließen" des Dialogs simulieren (ändern Sie die Zeichenfolge "MY_DIALOG" für den Namen Ihres eigenen Dialogs)

$("div[aria-labelledby='ui-dialog-title-MY_DIALOG'] div.ui-helper-clearfix a.ui-dialog-titlebar-close")[0].click();

Ich finde nicht, dass es so hell ist, Dialogsachen zu finden, die $ ('. Any-selector') aus dem gesamten DOM verwenden.

Versuchen

$('<div />').dialog({
    open: function(event, ui){
        var ins = $(this).dialog('instance');
        var overlay = ins.overlay;
        overlay.off('click').on('click', {$dialog: $(this)}, function(event){
            event.data.$dialog.dialog('close');
        });
    }
});

Sie erhalten wirklich die Überlagerung von der Dialoginstanz, zu der sie gehört. So wird es nie schief gehen.

Smart Code: Ich verwende folgenden Code, damit alles klar und lesbar bleibt. Der äußere Körper der Seite wird das Dialogfeld schließen.

$(document).ready(function () {
   $('body').on('click', '.ui-widget-overlay', closeDialogBox);
});

function closeDialogBox() {
    $('#dialog-message').dialog('close');
}

Es ist ganz einfach, Sie brauchen keine Plugins, nur Jquery oder Sie können es mit einfachem Javascript tun.

$('#dialog').on('click', function(e){
  e.stopPropagation();
});
$(document.body).on('click', function(e){
  master.hide();
});