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

From Level Access Web Labs
Jump to navigation Jump to search
(Demo how to retain focus within modal dialog until dismissed)
 
Line 32: Line 32:
 
     var controls = modal.getElementsByClassName('modal-control');
 
     var controls = modal.getElementsByClassName('modal-control');
  
     function shifty(e,f,g){
+
     function modalShift(e,f,g){
 
     //handle focus between modal elements
 
     //handle focus between modal elements
 
         //e - current element
 
         //e - current element
Line 59: Line 59:
 
     //middle controls
 
     //middle controls
 
     for (var i=1,j=controls.length-1;i < j; i++){
 
     for (var i=1,j=controls.length-1;i < j; i++){
         shifty(controls[i], controls[i+1], controls[i-1]);
+
         modalShift(controls[i], controls[i+1], controls[i-1]);
 
     }
 
     }
 
     //first control
 
     //first control
     shifty(controls[0], controls[1], controls[controls.length-1]);
+
     modalShift(controls[0], controls[1], controls[controls.length-1]);
 
     //last control
 
     //last control
     shifty(controls[controls.length-1], controls[0], controls[controls.length-2]);
+
     modalShift(controls[controls.length-1], controls[0], controls[controls.length-2]);
 
      
 
      
 
     function closeDialog() {
 
     function closeDialog() {

Revision as of 18:11, 30 March 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