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

按下Escape键时，请尝试以下代码关闭对话框：

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

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

Answer 2

我遇到了同样的问题，并找到了非常优雅的解决方案，以防您想在实际点击内部之前关闭对话框：

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

因此，我们只需要将焦点设置为父.ui-dialog容器，在这种情况下， Esc 将适用于所有情况。 $(document).keyup解决方案的缺点，如果你有嵌套对话框， Esc 按钮将关闭你最顶层的对话框和底部对话框。

Answer 3

焦点事件在获得焦点时发送到元素。此事件隐式适用于有限的元素集，例如表单元素（，等）和链接。 docs here

您可以尝试对话框的moveToTop方法，也许会有所帮助

在您的代码中，我认为，您应该在触发之前绑定“click”事件。

Answer 4

即使打开多个模态，以下代码也应该工作：

myComPort.Open() myComPort.Close()

Jquery ui对话框没有用'Escape`按键关闭

4 个答案: