Difference between revisions of "ARIA Dialog"

From Level Access Web Labs
Jump to navigation Jump to search
Line 4: Line 4:
 
<style>
 
<style>
 
.box-hidden {
 
.box-hidden {
display: none;
+
display: none;
position: absolute;
+
position: absolute;
top: 19em; left:15em; width:20em; height:5em;
+
top: 19em; left:15em; width:20em; height:5em;
border: 2px solid black;
+
border: 2px solid black;
padding:0 1em 1em 1em;
+
padding:0 1em 1em 1em;
background-color: #eee;
+
background-color: #eee;
z-index:1002;
+
z-index:1002;
overflow: auto;
+
overflow: auto;
}
+
}
 
</style>
 
</style>
 +
 
<script>
 
<script>
 
var dialogOpen = false, lastFocus, dialog, okbutton, pagebackground;
 
var dialogOpen = false, lastFocus, dialog, okbutton, pagebackground;
Line 80: Line 81:
 
<div id="bg">
 
<div id="bg">
 
<p><a onclick="showDialog(this); return false;" href="#" role="button">Display a dialog</a></p>
 
<p><a onclick="showDialog(this); return false;" href="#" role="button">Display a dialog</a></p>
 +
 +
<p>Other page content with <a href="#">a dummy focusable element</a></p>
 
</div>
 
</div>
 
</body>
 
</body>
 
</html>
 
</html>
 
[[Category:ARIA]]
 
[[Category:ARIA]]

Revision as of 15:48, 28 March 2014

ARIA Dialog Example