Диалоги jQuery UI: как закрыть диалог, если щелкнуть снаружи?

Question

В документах Я не видел такой информации.

Есть варианты закрытия диалога в таких случаях:

1) нажать Esc;

2) нажмите кнопку «ОК» или «Закрыть» в диалоговом окне.

Но как закрыть диалог, если щелкнуть снаружи?

Спасибо!

Answer 1

Вот 2 других решения для немодальных диалогов:

Если диалоговое окно не является модальным Метод 1: Метод 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

Я нашел решение на ryanjeffords.com :

<script type="text/javascript">

    $(document).ready(function() {

        $("#dialog").dialog();

        $('.ui-widget-overlay').live("click",function(){
            $("#dialog").dialog("close");
        });    
    });   
</script>

Answer 3

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

open: function(event,ui) {
    $('.ui-widget-overlay').bind('click', function(event,ui) {         
        $('#myModal').dialog('close');
    });
}

Answer 4

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

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

Плагин также находится на github: https://github.com/coheractio/jQuery-UI-Dialog-ClickOutside

Laurent

Answer 5

Это мое решение.

У меня есть, например,

<div id="dialog1">Some content in here</div>
<div id="dialog2">Different content in here</div>
<div id="dialog3">And so on...</div>

Каждый div открывается в виде диалога в зависимости от того, с чем взаимодействует пользователь.Чтобы закрыть текущую активную, я делаю это.

// This closes the dialog when the user clicks outside of it.
$("body").on('click', '.ui-widget-overlay', function() {
    if( $("div.ui-dialog").is(":visible") )
    {
        var openDialogId = $(".ui-dialog").find(".ui-dialog-content:visible").attr("id");
        if ($("#"+openDialogId).dialog("isOpen"))
        {
            $("#"+openDialogId).dialog('close');
        }
    }        
});