Закрыть диалог по клику (где угодно)

Question

Есть ли опция по умолчанию, чтобы закрыть диалоговое окно jQuery, щелкнув где-нибудь на экране вместо значка закрытия?

Answer 1

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

Вот 3 способа закрыть диалоговое окно jquery UI при нажатии вне 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;
    }
});

Answer 2

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

Код будет примерно таким (непроверенным):

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

Изменить: Следующее было также проверено на кендо:

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

Answer 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". И закрывает все открытые диалоги каждый раз, когда щелкает фон одного из них.)

Answer 4

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

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

});

Answer 5

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

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

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

Answer 6

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

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

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

Answer 7

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

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

Answer 8

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

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

Laurent

Answer 9

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

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

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

Answer 10

Попробуй это:

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