it-swarm.com.ru

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

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

50
Fuxi

Правка: вот плагин, который я создал, который расширяет JQuery UI Dialog, чтобы включить закрытие при нажатии снаружи и другие функции: 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;
    }
});
124
Jason

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

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

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

Правка: Для Kendo было также проверено следующее:

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

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

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

8
jackadams49

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

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

});
7
DaWolf

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

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

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

6
jk.

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

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

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

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

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

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

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

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

0
dragoeco

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

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

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

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

Laurent

0
Laurent