Interfejs użytkownika jQuery - Zamknij okno dialogowe po kliknięciu na zewnątrz

Mam okno dialogowe interfejsu użytkownika jQuery, które jest wyświetlane po kliknięciu określonych elementów. Chciałbym zamknąć okno dialogowe, jeśli kliknięcie nastąpi w innym miejscu niż te elementy wyzwalające lub samo okno dialogowe.

Oto kod otwierający okno dialogowe:

$(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');
    });*/
});

Jeśli odkomentuję ostatnią część, okno dialogowe nigdy się nie otworzy. Zakładam, że dzieje się tak, ponieważ to samo kliknięcie, które otwiera okno dialogowe, powoduje jego ponowne zamknięcie.

Końcowy kod roboczy
Uwaga: to jest użycie wtyczki jQuery zdarzenia zewnętrzne

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

Sprawdź wtyczkę jQuery Outside Events

Pozwala:

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

Przepraszam, że przeciągam to po tak długim czasie, ale użyłem poniższego. Jakieś wady? Zobacz funkcję open ...

$("#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'); 
        }); 
    }
});

Zapomnij o używaniu innej wtyczki:

Oto 3 metody zamykania okna dialogowego interfejsu użytkownika jquery po kliknięciu poza popinem:

Jeśli okno dialogowe jest modalne / ma nakładkę w tle: 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');
            })
        }
    });
}); 

Jeśli okno dialogowe jest niemodalne Metoda 1: metoda 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');
                        }
                       }
                      );

Niemodalna metoda dialogu 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;
          }


  });

Po prostu dodaj ten globalny skrypt, który zamyka wszystkie okna dialogowe po prostu klikając je poza nimi.

$(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 pokazujący powyższy kod w akcji.

Musiałem zrobić dwie części. Najpierw zewnętrzny moduł obsługi kliknięcia:

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

Spowoduje to wywołanie klasy dialog('close')ogólnej ui-dialog-contenti zamknie wszystkie okna dialogowe, jeśli kliknięcie nie nastąpiło w żadnym z nich. Będzie działać również z modalnymi oknami dialogowymi, ponieważ nakładka nie jest częścią.ui-dialog pola.

Problemem jest:

1. Większość okien dialogowych jest tworzona z powodu kliknięć poza oknem dialogowym
2. Ten program obsługi jest uruchamiany po tym, jak te kliknięcia utworzyły okno dialogowe i przeszły do ​​dokumentu, więc natychmiast je zamyka.

Aby to naprawić, musiałem dodać stopPropagation do tych programów obsługi kliknięć:

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

To pytanie jest trochę stare, ale w przypadku, gdy ktoś chce zamknąć okno dialogowe, które NIE jest modalne, gdy użytkownik gdzieś kliknie, możesz użyć tego, które wziąłem z wtyczki JQuery UI Multiselect . Główną zaletą jest to, że kliknięcie nie jest „gubione” (jeśli użytkownik chce kliknąć link lub przycisk, akcja jest wykonywana).

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

Możesz to zrobić bez używania dodatkowej wtyczki

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

Tutaj $ dialog jest oknem dialogowym. Zasadniczo robimy to, aby uzyskać ostatni widżet nakładki za każdym razem, gdy otworzy się to okno dialogowe, i powiązać moduł obsługi kliknięcia z tą nakładką, aby zamknąć okno dialogowe $ dialog za każdym razem, gdy nakładka zostanie kliknięta.

nie ma potrzeby korzystania z wtyczki wydarzeń zewnętrznych ...

po prostu dodaj procedurę obsługi zdarzeń do elementu div .ui-widget-overlay:

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

po prostu upewnij się, że dowolny selektor, którego użyłeś w oknie dialogowym jQuery ui, jest również wywoływany, aby je zamknąć .. tj. # ui-dialog-selector-go-here

To nie używa interfejsu użytkownika jQuery, ale używa jQuery i może być przydatne dla tych, którzy z jakiegokolwiek powodu nie używają interfejsu użytkownika jQuery. Zrób to tak:

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

$(document).ready(function(){

  showDialog();    

});

Po wyświetleniu okna dialogowego dodaję moduł obsługi kliknięcia, który szuka tylko pierwszego kliknięcia.

Teraz byłoby lepiej, gdybym mógł zmusić go do ignorowania kliknięć czegokolwiek w #dialog i jego zawartości, ale kiedy próbowałem przełączyć $ ('*') na $ (': not ("# dialog, # dialog *") '), nadal wykrywał # kliknięć dialogów.

W każdym razie używałem tego wyłącznie do foto lightboxa, więc działało dobrze w tym celu.

Podany przykład (y) używa jednego okna dialogowego o identyfikatorze '#dialog', potrzebowałem rozwiązania, które zamknie każde okno dialogowe:

$.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');
        })
    }
});

Dziękuję mojemu koledze Youri Arkesteijn za sugestię użycia prototypu.

To jedyna metoda, która zadziałała w moim przypadku w przypadku mojego NIEMODALNEGO okna dialogowego

$(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");
    }
});

Cały zasługa należy przypisać Axle
Click poza dialogiem niemodalnym, aby zamknąć

Dla zainteresowanych stworzyłem ogólną wtyczkę, która umożliwia zamknięcie okna dialogowego po kliknięciu poza nim, niezależnie od tego, czy jest to okno modalne, czy niemodalne. Obsługuje jedno lub wiele okien dialogowych na tej samej stronie.

Więcej informacji tutaj: http://www.coheractio.com/blog/closing-jquery-ui-dialog-widget-when-clicking-outside

Laurent

Korzystam z tego rozwiązania na podstawie jednego zamieszczonego tutaj:

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

Miałem ten sam problem podczas tworzenia podglądu modalnego na jednej stronie. Po wielu googlach znalazłem to bardzo przydatne rozwiązanie. W przypadku zdarzenia i celu sprawdza, gdzie nastąpiło kliknięcie iw zależności od tego, czy wyzwala akcję, czy nic nie robi.

Witryna biblioteki fragmentów kodu

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

To proste, w rzeczywistości nie potrzebujesz żadnych wtyczek, po prostu jquery lub możesz to zrobić za pomocą prostego javascript.

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

Nie sądzę, aby znajdowanie elementów dialogowych za pomocą $ ('. Any-selector') z całego DOM było takie jasne.

Próbować

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

Naprawdę otrzymujesz nakładkę z instancji okna dialogowego, do którego należy, nic nie pójdzie źle w ten sposób.

Za pomocą poniższego kodu możesz zasymulować kliknięcie przycisku „zamknij” w oknie dialogowym (zmień ciąg „MY_DIALOG” na nazwę własnego okna dialogowego)

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

Inteligentny kod: używam następującego kodu, aby wszystko było jasne i czytelne. korpus zewnętrzny zamyka okno dialogowe.

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

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

Skończyło się na tym, że użyłem tego kodu, który powinien działać na wszystkich otwartych oknach dialogowych na stronie, ignorować kliknięcia etykietek narzędzi i czyścić zasoby zamykanego okna dialogowego.

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

            }
        });