Диалоговое окно Jquery ui не закрывается клавишей `Escape`

Question

Когда пользователь открывает диалоговое окно, есть куча ajax-запросов, которые необходимо обработать, и поэтому у меня есть второе диалоговое окно, которое просто отображает информацию о загрузке и закрывается после того, как все запросы будут были обработаны.

Невозможно закрыть диалоговое окно пользователя с помощью клавиши Escape после его открытия. Я должен щелкнуть по самому диалогу, прежде чем я смогу использовать escape.

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

$(document).ajaxStart(function() { 
    // IF loading dialog is not allready being shown show it. 
    if ($("#LoadingData").dialog('isOpen') === false) { 
     $("#LoadingData").dialog('open'); 
    } 
}); 

$(document).ajaxStop(function() { 
    //Close the loading dialog once the requests have finished 
    $("#LoadingData").dialog('close'); 
    //Find the user opened dialog 
    $('.cmdialog').each(function() { 
     if ($(this).dialog('isOpen')) { 
      $(this).trigger('click');//set focus to dialog 
      // have also replaced .trigger('click') with .focus() but to no avail 
     } 
    }).on('click', function() { 
     //if click is triggerd set the focus of the dialog. 
     if ($(this).prop('id') != 'LoadingData') { 
      $(this).focus(); 
     } 
    }); 
}); 

Я также попытался установить фокус на первый элемент в диалоге с $('#DialogName:first-child').focus() и $('#DialogName:first-child').trigger('click'), но это тоже не работает.

Любые идеи относительно того, почему фокус не установлен? Или я недопонимаю/неправильно использую .focus() и .trigger('event')?

Спасибо :)

Answer 1

Попробуйте приведенный ниже код для закрытия диалогового окна при нажатии клавиши ЭСКАТО нажата:

$(document).keyup(function(e) { 

    if (e.keyCode == 27) { $("#LoadingData").dialog('close'); } // esc 
}); 

Answer 2

событие фокус передается элементу, когда он получает фокус. Это событие неявно применимо к ограниченному набору элементов, таких как элементы формы (и т. Д.) И ссылки. docs here

Вы можете попробовать метод moveToTop в диалоге, может быть, это поможет

И в вашем коде, я думаю, вы должны связать «щелчок» событие перед запуском его.

Answer 3

Я была такая же проблема, и нашел довольно элегантное решение, в случае, если вы хотите, чтобы закрыть диалоговое окно, прежде чем на самом деле, щелкнув внутри него:

$("#LoadingData").dialog({ 
    ..., 
    focus: function() { 
     $('#LoadingData').closest('.ui-dialog').focus(); 
    } 
}); 

Итак, нам просто нужно установить фокус на родительский .ui-dialog контейнер, и в этом случае Esc будет работать во всех случаях. Недостаток решения $(document).keyup, если у вас есть вложенные диалоги, кнопка Esc закроет ваш самый верхний диалог и нижний.