Jquery的closeOnEscape工作不正常給出

下面的代碼： http://jsfiddle.net/UsZG8/1/Jquery的closeOnEscape工作不正常給出

<html> 
    <head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script> 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css"/> 
    <script type="text/javascript"> 
     $(document).ready(function() { 

      $("#modalDiv").dialog({ 
       modal: false, 
       autoOpen: false, 
       height: '500', 
       width: '750', 
       draggable: true, 
       resizable: false, 
       position: 'center', 
       closeOnEscape: true, 
      }); 
      $('#1stPage').click(
       function() { 
        url = 'mypage.html'; 
        $("#modalDiv").dialog('option', 'title', 'Test 1st'); 
        $("#modalDiv").dialog("open"); 
        $("#modalIFrame").attr('src',url); 
        return false; 
      }); 

      $('#2ndPage').click(
       function() { 
        url = 'myPage2.html'; 
        $("#modalDiv").dialog('option', 'title', 'Test 2nd'); 
        $("#modalDiv").dialog("open"); 
        $("#modalIFrame").attr('src',url); 
        return false; 
      }); 
     }); 
    </script> 
    </head> 
    <body> 
     <a id="1stPage" href="#">1st link</a><br><br> 
     <a id="2ndPage" href="#">2nd link</a> 
     <div id="modalDiv"><iframe id="modalIFrame" width="100%" height="100%" marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto" title="Dialog Title"></iframe></div> 
    </body> 
</html>

當只需點擊其中一個鏈接，closeOnEscape工作正常。在點擊esc之前點擊兩個鏈接，closeOnEscape將不起作用。

看來我錯過了一些東西，我也搞不明白問題在哪裏。感謝任何幫助:)。

來源

2012-10-04 Biberwerke

你必須通過點擊「重新調整」對話框。當你點擊第二個鏈接它失去焦點

發送關閉命令之前，開幕式將重新聚焦其

$(document).ready(function() { 

     $("#modalDiv").dialog({ 
      modal: false, 
      autoOpen: false, 
      height: '500', 
      width: '750', 
      draggable: true, 
      resizable: false, 
      position: 'center', 
      closeOnEscape: true, 
     }); 
     $('#1stPage').click(
      function() { 
       url = 'mypage.html'; 
       $("#modalDiv").dialog('option', 'title', 'Test 1st'); 
       $("#modalDiv").dialog("close");//<---- 
       $("#modalDiv").dialog("open"); 
       $("#modalIFrame").attr('src',url); 
       $("#modalDiv").click(); 
       return false; 
     }); 

     $('#2ndPage').click(
      function() { 
       url = 'myPage2.html'; 
       $("#modalDiv").dialog('option', 'title', 'Test 2nd'); 
       $("#modalDiv").dialog("close");//<---- 
       $("#modalDiv").dialog("open"); 
       $("#modalIFrame").attr('src',url); 
       return false; 
     }); 
    });

來源

2012-10-04 18:00:40

該死，打我1分鐘。 +1 –

Thx快速幫助（也適用於Isaac Fife）。焦點問題現在已經解決了，當拖動窗口然後點擊一個鏈接時，窗口現在從它的位置跳過幾個像素。有什麼機會解決這個問題？（live：http://jsfiddle.net/UsZG8/2/） – Biberwerke

現在就開始工作吧。我只是添加代碼來關閉所有模式對話框時按「Esc」 - 所以焦點不在問題。 thx再次爲快速幫助！ – Biberwerke

我相信，這是因爲模式對話框失去焦點。打開對話框後，將焦點設置到該對話框上。我認爲你的closeOnEscape問題將會消失。

$('#1stPage').click(
    function() { 
    url = 'mypage.html'; 
    $("#modalDiv").dialog('option', 'title', 'Test 1st'); 
    $("#modalDiv").dialog("open"); 
    $("#modalIFrame").attr('src',url); 
    //focus the modal div 
    return false; 
}); 

$('#2ndPage').click(
    function() { 
    url = 'myPage2.html'; 
    $("#modalDiv").dialog('option', 'title', 'Test 2nd'); 
    $("#modalDiv").dialog("open"); 
    $("#modalIFrame").attr('src',url); 
    //focus the modal div 
    return false; 
});

來源

2012-10-04 18:01:44

Jquery的closeOnEscape工作不正常給出

回答

相關問題