馴服jQuery對話框小工具

Question

我正在嘗試解決一個jQuery對話框小部件的2個問題。

1）當對話框爲模態時，在某些計算機屏幕上（其中縮放&分辨率可能會有所不同）對話框會將滾動條引入文檔。顯然，在對話框下面有一個疊加層，我假設這就是導致滾動條出現的原因。你知道我可以如何避免這種情況的發生：i）在所有分辨率下和ii）在任何縮放下，我想讓'Enter'按鈕產生一個默認動作。我到目前爲止嘗試過的代碼在下面，但我無法使它工作。要清楚，我已經看過解決方案here。而這個div肯定集中於開放。但是當我按[Enter]鍵時，我不斷收到Chrome中的這些控制檯錯誤。

 

    FOCUS set 
    ... 

    event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future. 

這是到目前爲止，我已經試過代碼：

 

    var opts = {  
     modal: true, 
     open: function() { 
     $(this).focus(); 
     }, 
     focus: function(event, ui) { 
     console.log('FOCUS set'); 

     $(this) 
      .keyup(function(e) { 
      var code = (e.keyCode ? e.keyCode : e.which); 
      if (code == 10 || code == 13) alert('Enter key was pressed.'); 
      e.preventDefault(); 
      console.log('key pressed.'); 
      }); 
     }, 
     ... 
    } 

    $('#mydiv').dialog(opts); 

Answer 1

下面是使用輸入關閉的解決方案：

http://jsfiddle.net/J9KvV/

的JavaScript

$(document).ready(function() { 
    $('#dialog').dialog(); 
    $(document).keydown(function (event) { 
     var dialog = $('#dialog'); 
     if (dialog.dialog('isOpen')) { 
      if (event.keyCode === 13) { 
       dialog.dialog('close'); 
      } 
     } 
    }); 
}); 

HTML

<div id="dialog" title="Header"> 
My Window 
</div>