it-swarm.com.de

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

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 anders als auf diese auslösenden Elemente oder den Dialog selbst erfolgt.

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 nicht kommentiere, wird der Dialog nie geöffnet. Ich gehe davon aus, dass derselbe Klick, der das Dialogfeld öffnet, es wieder schließt.


Abschließender Arbeitscode
Hinweis: Dies verwendet die jQuery außerhalb von Ereignissen plugin

$(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');
    });
});
105
Sonny

Schauen Sie sich das Plugin jQuery Outside Events an

Lässt Sie tun:

$field_hint.bind('clickoutside',function(){
    $field_hint.dialog('close');
});
30
PetersenDidIt

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'); 
        }); 
    }
});
153
stumac85

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


  });
76
Jason

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");
            }
        });
    });;
});
15
Michele Locati
$(".ui-widget-overlay").click (function () {
    $("#dialog-id").dialog( "close" );
});

Fiddle zeigt den obigen Code in Aktion. 

10
jk.

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
});
8
Jerph

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.

5
GuruKay

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');
                        }            
                    });
                }                    
            });
5
Melanie

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

5

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.

3
Volomike

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.

2

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

1
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;
}
1
Alejo

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

1
Versatile

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();
0
perkas

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.

0
badboy

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');
}
0
Farid Abbas

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();
});
0
Rzasgal