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>

リンクの1つをクリックするだけで、closeOnEscapeは正常に機能します。escを押す前に両方のリンクをクリックすると、closeOnEscapeは機能しません。

何かが足りなかったようで、どこに問題があるのか​​わからなかった。助けてくれてありがとう:)。

4

2 に答える 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 に答える