84 lines
2.0 KiB
HTML
84 lines
2.0 KiB
HTML
|
<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>
|