Home/ Questions/Q 8637033
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T10:22:40+00:00

Following Code given: 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

  • 0

Following Code given:
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>

When just clicking one of the links, closeOnEscape is working fine.
When clicking on both links before hitting esc, closeOnEscape will not work.

It seems I missed something, also I couldn’t figure out where the problem is.
appreciate any help :).

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have to “refocus” the dialog by clicking on it. When you click the second link it loses focus

    sending a close command before opening will refocus it

    $(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;
        });  
  });
    • 0