Zamknij okno dialogowe kliknięcia (w dowolnym miejscu)

Question

Czy istnieje domyślna opcja zamknięcia okna dialogowego jQuery, klikając gdzieś na ekranie zamiast ikony zamknięcia?

Answer 1

Podczas tworzenia okna dialogowego JQuery JQuery wstawia klasę nakładki interfejsu użytkownika. Jeśli powiążesz funkcję klikania z tą klasą, aby zamknąć okno dialogowe, powinna ona zapewnić pożądaną funkcjonalność.

kod będzie coś takiego (niesprawdzone):

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

Edit: został przetestowany pod kątem Kendo oraz następujące:

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

Answer 2

Ten post może pomóc:

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

Zobacz także How to close a jQuery UI modal dialog by clicking outside the area covered by the box?, aby dowiedzieć się, kiedy i jak zastosować overlay kliknięcie lub wydarzenie na żywo w zależności od tego, w jaki sposób korzystasz z okna dialogowego na stronie.

Answer 3

Edycja: Oto plugin I autorami że rozszerza UI Dialog jQuery to zamykanie po kliknięciu na zewnątrz oraz inne funkcje: https://github.com/jasonday/jQuery-UI-Dialog-extended

Oto 3 sposoby, aby zamknąć okno dialogowe jQuery UI po kliknięciu poza Popin:

Jeśli okno jest modalne/posiada tła nakładki: 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żeli dialog jest blokami 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'); 
     } 
    }); 

blokami dialogowe Metoda 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; 
    } 
}); 

Answer 4

W niektórych przypadkach odpowiedź Jasona jest przesadą. I $('.ui-widget-overlay').click(function(){ $("#dialog").dialog("close"); }); nie zawsze działa z treścią dynamiczną.

Rozwiązanie że znajdę prace we wszystkich przypadkach jest:

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

Answer 5

Jeśli masz kilka okien dialogowych, które mogą być otwierane na stronie, pozwoli to któryś z nich zostanie zamknięta poprzez kliknięcie na tle:

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

(działa tylko dla modalnych okien dialogowych, gdyż opiera się na „.ui-widget-overlay”. I to nie zamyka wszystkie otwarte okna dialogowe dowolnym momencie w tle jednego z nich jest kliknięty.)

Answer 6

Jeśli chcesz zrobić to dla wszystkich okien dialogowych w całej witrynie, wypróbuj poniższy kod ...

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

}); 

Answer 7

obliczu tego samego problemu, mam stworzył małą wtyczkę, która pozwala, aby zamknąć okno dialogowe po kliknięciu poza nim czy nią dialog modalny lub blokami. Obsługuje jedno lub wiele okien dialogowych na tej samej stronie.

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

Laurent

Answer 8

Spróbuj tego:

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

Answer 9

Jeżeli kod z poprzednich postów nie działa, spróbuj tego:

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

Answer 10

Trochę za późno, ale to rozwiązanie sprawdziło się u mnie. Idealne, jeśli twój modal znajduje się w tagu nakładki. Modal zostanie zamknięty po kliknięciu w dowolne miejsce poza treścią modalną.

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

Oto working example