Difference between revisions of "ARIA Dialog"

From Level Access Web Labs
Jump to navigation Jump to search
(Created page with "<html lang="en"> <head> <title>ARIA Dialog Example</title> <style> .box-hidden { display: none; position: absolute; top: 19em; left:15em; width:20em; height:5em; border: 2px s...")
 
Line 72: Line 72:
 
</head>
 
</head>
 
<body>
 
<body>
<p><a onclick="toggleDialog('show');" href="#">Display a dialog</a></p>
+
<div role="dialog" aria-labelledby="myDialog" id="box" class="box-hidden" tabindex="-1">
<div tabindex="-1" style="display: none;" role="dialog" aria-labelledby="myDialog" id="box" class="box-hidden">
 
 
<h3 id="myDialog">Just an example.</h3>
 
<h3 id="myDialog">Just an example.</h3>
<button onclick="toggleDialog('hide');" class="close-button">OK</button>
+
<button id="ok" onclick="hideDialog(this);" class="close-button">OK</button>
<button onclick="toggleDialog('hide');" class="close-button">Cancel</button>
+
<button onclick="hideDialog(this);" class="close-button">Cancel</button>
 +
</div>
 +
 
 +
<div id="bg">
 +
<p><a onclick="showDialog(this); return false;" href="#" role="button">Display a dialog</a></p>
 
</div>
 
</div>
 
</body>
 
</body>
 
</html>
 
</html>
 
[[Category:ARIA]]
 
[[Category:ARIA]]

Revision as of 15:44, 28 March 2014

ARIA Dialog Example