1

给出以下代码：http: //jsfiddle.net/UsZG8/1/

<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 将不起作用。

似乎我错过了一些东西，我也无法弄清楚问题出在哪里。感谢任何帮助:)。

4

2 回答 2

2

您必须通过单击它来“重新聚焦”对话框。当您单击第二个链接时，它会失去焦点

在打开之前发送关闭命令将重新聚焦它

$(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-04T18:00:40.373 回答
2

我相信这是因为模态对话框失去了焦点。打开对话框后，将焦点设置为它。我认为您的 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-04T18:01:44.957 回答