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

Question

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

Answer 1

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

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

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

Edit: была протестирована на Кендо, а также следующее:

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

Answer 2

Это сообщение может помочь:

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

См. Также How to close a jQuery UI modal dialog by clicking outside the area covered by the box? для объяснения того, когда и как подать заявку. overlay нажмите или зарегистрируйтесь в зависимости от того, как вы используете диалог на странице.

Answer 3

Edit: Вот плагин, который я автором, который расширяет 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; 
    } 
}); 

Answer 4

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

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

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

Answer 5

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

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

(работает только для модальных диалогов, поскольку она опирается на «.ui-виджет-накладкой. И это делает близко все открывать окна в любое время на фоне одного из них щелкнул.)

Answer 6

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

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

}); 

Answer 7

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

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

Laurent

Answer 8

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

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

Answer 9

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

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

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

Вот working example