Difference between revisions of "Modal dialog with ARIA"

From Level Access Web Labs
Jump to navigation Jump to search
(Add a modalShadingOverlay element to shade the whole page)
m
Line 75: Line 75:
 
         focusStack.push(document.activeElement);
 
         focusStack.push(document.activeElement);
 
         document.getElementById("dialog1").focus();
 
         document.getElementById("dialog1").focus();
         document.getElementById("modalShadingOverlay").css('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").css('display', 'none');
+
        document.getElementById("modalShadingOverlay").style.display = 'none';
 
     //  document.getElementById("pageContent").className = "";
 
     //  document.getElementById("pageContent").className = "";
  

Revision as of 00:18, 23 November 2016

Example

Note - not implemented:

  • Constraining keyboard focus within the modal dialog


...

...