Ticket #3539 (new bug)

Opened 22 months ago

Last modified 16 months ago

Stacked dialogs can be closed even when not in front

Reported by: BrianHV Owned by: scott.gonzalez
Priority: minor Milestone: 1.next
Component: ui.dialog Version: 1.6rc2
Keywords: Cc:

Description

The escape key can be used to close a modal dialog even when it's not in the front of the stacking order. Tested in IE7 with trunk. 

<html>
    <body>
        <script type="text/javascript" language="javascript" src="jquery-1.2.6.js"></script>
        <script type="text/javascript" language="javascript" src="ui/ui.core.js"></script>
        <script type="text/javascript" language="javascript" src="ui/ui.dialog.js"></script>
        <div id="firstDialog"><h1>First Dialog</h1><a href="#" onclick="$('#secondDialog').dialog('open')">Now click this link</a></div>
        <div id="secondDialog"><h1>Second Dialog</h1><p>Now click the text "First Dialog" and then press escape.  The first dialog will close, leaving the second dialog stranded.</div>
        <p><a href="#" onclick="$('#firstDialog').dialog('open');">Click this link</a></p>
        <script type="text/javascript" language="javascript">
            $(document).ready(function(){
                $('#firstDialog').dialog({modal: true, width: 400, height: 400, overlay: { opacity: 0.5, background: 'black' }, autoOpen: false}).css('background', 'white');
                $('#secondDialog').dialog({modal: true, width: 200, height: 200, overlay: { opacity: 0.5, background: 'black' }, autoOpen: false}).css('background', 'white');
            });
        </script>
    </body>
</html>

Change History

Changed 20 months ago by scott.gonzalez

  • milestone changed from TBD to 1.next

Changed 16 months ago by joern.zaefferer

The dialog itself binds keydown event to itself for closing the dialog on ESC; in addition, the dialog overlay binds a keydown event to document, without filtering to close only the active dialog.

Instead of creating an overlay for each modal dialog, there should be just one overlay below the active dialog and above all others. Pressing ESC would then close the top dialog and move the overlay below the next dialog, or hide it if there is none.

Note: See TracTickets for help on using tickets.