Difference between revisions of "Dialog Focus: Keep it modal"
Jump to navigation
Jump to search
Dialog Focus - Keeping focus inside modal dialogs.
Bbroughton (talk | contribs) |
Bbroughton (talk | contribs) m |
||
| Line 17: | Line 17: | ||
<a href="#swag">A control before the dialog</a> | <a href="#swag">A control before the dialog</a> | ||
<a class="modal-launcher" href="javascript:openDialog();">Open the dialog</a> | <a class="modal-launcher" href="javascript:openDialog();">Open the dialog</a> | ||
| − | <div class="modal closed"> | + | <div class="modal closed modal-control" tabindex="-1"> |
<a id="0" href="javascript:closeDialog();" class="closer modal-control">Close</a> | <a id="0" href="javascript:closeDialog();" class="closer modal-control">Close</a> | ||
<h2>Try to tab out of the dialog</h2> | <h2>Try to tab out of the dialog</h2> | ||
| Line 67: | Line 67: | ||
function closeDialog() { | function closeDialog() { | ||
| − | modal.className = 'modal closed'; | + | modal.className = 'modal closed modal-control'; |
document.getElementsByClassName('modal-launcher')[0].focus(); | document.getElementsByClassName('modal-launcher')[0].focus(); | ||
} | } | ||
function openDialog() { | function openDialog() { | ||
| − | modal.className = 'modal open'; | + | modal.className = 'modal open modal-control'; |
modal.setAttribute('tabindex','-1'); | modal.setAttribute('tabindex','-1'); | ||
modal.focus(); | modal.focus(); | ||
Revision as of 17:05, 9 May 2016
Dialog Focus - Keeping focus inside modal dialogs.
While the dialog is open, focus cannot move out of the dialog.
A control before the dialog Open the dialog A control after dialog