jQuery UI dialogs: как закрыть диалоговое окно при щелчке снаружи?

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

в таких случаях есть опции для закрытия диалога:

1) нажмите Esc;

2) Нажмите кнопку " ОК "или" закрыть " в диалоговом окне.

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

спасибо!

7
jquery-ui jquery-ui-dialog

5 ответов

вот 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;
          }


  });
7

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

<script type="text/javascript">

    $(document).ready(function() {

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

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

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

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

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

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

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

Лорен

1

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

у меня, например

<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');
        }
    }        
});
0