Difference between revisions of "Dialog Focus: Keep it modal"

From Level Access Web Labs
Jump to navigation Jump to search
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.

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