Stacked dialogs can be closed even when not in front
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 (8)
| Resolution: |
→ duplicate
|
| Status: |
open →
closed
|
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.