Difference between revisions of "Modal dialog with ARIA"

From Level Access Web Labs
Jump to navigation Jump to search
m
m
Line 56: Line 56:
 
       top:25%;
 
       top:25%;
 
       left:25%;
 
       left:25%;
−
       display:none;
+
       display:block;
 
     }
 
     }
 
   </style>
 
   </style>
Line 75: Line 75:
 
         focusStack.push(document.activeElement);
 
         focusStack.push(document.activeElement);
 
         document.getElementById("dialog1").focus();
 
         document.getElementById("dialog1").focus();
−
         document.getElementById("modalShadingOverlay").style.display = 'block';
+
         document.getElementById("modalShadingOverlay").style.display = "block";
 
       //  document.getElementById("pageContent").className = "body-dimmed";
 
       //  document.getElementById("pageContent").className = "body-dimmed";
 
         document.getElementById("pageContent").setAttribute("aria-hidden", "true");
 
         document.getElementById("pageContent").setAttribute("aria-hidden", "true");
Line 83: Line 83:
 
     function closeDialog1() {
 
     function closeDialog1() {
 
       document.getElementById("pageContent").setAttribute("aria-hidden", "false");
 
       document.getElementById("pageContent").setAttribute("aria-hidden", "false");
−
         document.getElementById("modalShadingOverlay").style.display = 'none';
+
         document.getElementById("modalShadingOverlay").style.display = "none";
 
     //  document.getElementById("pageContent").className = "";
 
     //  document.getElementById("pageContent").className = "";
  

Revision as of 00:21, 23 November 2016

Example

Note - not implemented:

  • Constraining keyboard focus within the modal dialog


...

...

Retrieved from "https://labs.levelaccess.com/index.php?title=Modal_dialog_with_ARIA&oldid=3170"