Закрыть диалог при нажатии (в любом месте)

Ответ 1

Изменить: здесь был создан плагин, который расширяет диалоговое окно интерфейса jQuery для включения закрытие при нажатии снаружи плюс другие функции: https://github.com/jasonday/jQuery-UI-Dialog-extended

Ниже приведены 3 метода закрытия диалогового окна пользовательского интерфейса jquery при нажатии за пределами popin:

Если диалог является модальным/имеет фоновое наложение: 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');
            })
        }
    });
}); 

Если диалог немодальный Метод 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');
        }
    });

Немодальный диалог Метод 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;
    }
});

Ответ 2

При создании окна JQuery Dialog JQuery вставляет класс ui-widget-overlay. Если вы привяжете функцию щелчка к этому классу, чтобы закрыть диалоговое окно, оно должно предоставить функциональность, которую вы ищете.

Код будет чем-то вроде этого (непроверенный):

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

Edit: Для Kendo было проверено следующее:

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

Ответ 3

Если у вас есть несколько диалогов, которые можно открыть на странице, это позволит закрыть любую из них, щелкнув по фону:

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

(работает только для модальных диалогов, поскольку он полагается на ".ui-widget-overlay", и закрывает диалоговые окна all при каждом обращении к фону одного из них.)

Ответ 4

Если вы хотите сделать это для всех диалогов по всему сайту, попробуйте следующий код...

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

});

Ответ 5

Этот пост может помочь:

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

См. также Как закрыть модальный диалог jQuery UI, щелкнув за пределами области, охватываемой полем?, для объяснения того, когда и как применять overlay щелчок или в зависимости от того, как вы используете диалог на странице.

Ответ 6

В некоторых случаях ответ Джейсона излишне. И $('.ui-widget-overlay').click(function(){ $("#dialog").dialog("close"); }); не всегда работает с динамическим контентом.

Решение, которое я нахожу, работает во всех случаях:

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

Ответ 7

Если код предыдущих сообщений не работает, попробуйте:

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

Ответ 8

Опираясь на ту же проблему, я создал небольшой плагин, который позволяет закрыть диалоговое окно при нажатии вне его, будь то модальное или немодальное диалоговое окно. Он поддерживает один или несколько диалогов на одной странице.

Дополнительная информация на моем сайте здесь: http://www.coheractio.com/blog/closing-jquery-ui-dialog-widget-when-clicking-outside

Лоран

Ответ 9

Попробуйте следующее:

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

Ответ 10

Немного поздно, но это решение, которое сработало для меня. Идеально, если ваш модаль находится внутри тега overlay. Таким образом, модальный будет закрываться, когда вы нажимаете где-либо вне модального контента.

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

Вот рабочий пример