<html> <head> <style> .box-hidden { display: none; position: absolute; top: 19em; left:15em; width:20em; height:5em; border: 2px solid black; padding:0 1em 1em 1em; background-color: #eee; z-index:1002; overflow: auto; } </style> <script> var dialogOpen = false, lastFocus, dialog, okbutton, pagebackground; function showDialog(el) { lastFocus = el || document.activeElement; toggleDialog('show'); } function hideDialog(el) { toggleDialog('hide'); } function toggleDialog(sh) { dialog = document.getElementById("box"); okbutton = document.getElementById("ok"); pagebackground = document.getElementById("bg"); if (sh == "show") { dialogOpen = true; // show the dialog dialog.style.display = 'block'; // after displaying the dialog, focus an element inside it okbutton.focus(); // only hide the background *after* you've moved focus out of the content that will be "hidden" pagebackground.setAttribute("aria-hidden","true"); } else { dialogOpen = false; dialog.style.display = 'none'; pagebackground.setAttribute("aria-hidden","false"); lastFocus.focus(); } } document.addEventListener("focus", function(event) { var d = document.getElementById("box"); if (dialogOpen && !d.contains(event.target)) { event.stopPropagation(); d.focus(); } }, true); document.addEventListener("keydown", function(event) { if (dialogOpen && event.keyCode == 27) { toggleDialog('hide'); } }, true); </script> </head> <body> <p>This was taken from <a href="http://www.w3.org/WAI/GL/wiki/Using_ARIA_role%3Ddialog_to_implement_a_modal_dialog_box">The WCAG Wiki</a>.</p> <p><a onclick="toggleDialog('show');" href="#">Display a dialog</a></p> <div tabindex="-1" style="display: none;" role="dialog" aria-labelledby="myDialog" id="box" class="box-hidden"> <h3 id="myDialog">Just an example.</h3> <button onclick="toggleDialog('hide');" class="close-button">OK</button> <button onclick="toggleDialog('hide');" class="close-button">Cancel</button> </div> <p>Another <a href="foo">link</a></p> </body> </html>