rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Fixes #10016 and updates that rather badly formatted callout

Browse Source
This commit is contained in:
Mark Otto 2013-08-26 18:19:31 -07:00
parent 4ad2ecf975
commit 2970653bdc
1 changed files with 3 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
javascript.html
View File

@ -205,7 +205,7 @@ $('#myModal').on('show.bs.modal', function (e) {
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Modal title</h4>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
@ -222,12 +222,8 @@ $('#myModal').on('show.bs.modal', function (e) {
<div class="bs-callout bs-callout-warning">
<h4>Make modals accessible</h4>
<p>
Be sure to add <code>role="dialog"</code> to your primary modal div. In the example above, <code>div#myModal</code>.<br>
Also, the <code>aria-labelledby</code> attribute references your modal title. In this example, <code>h4#myModalLabel</code>.<br>
Finally, <code>aria-hidden="true"</code> tells assistive technologies to skip DOM elements.<br>
Additionally, you may give a description of your modal dialog. Use the <code>aria-describedby</code> attribute in the modal's primary <code>&lt;div&gt;</code> to point to this description (this is not shown in the above example).
</p>
<p>Be sure to add <code>role="dialog"</code> to <code>.modal</code>, <code>aria-labelledby="myModalLabel"</code> attribute to reference the modal title, and <code>aria-hidden="true"</code> to tell assistive technologies to skip the modal's DOM elements.</p>
<p>Additionally, you may give a description of your modal dialog with <code>aria-describedby</code> on <code>.modal</code>.</p>
</div>
<h2 id="modals-usage">Usage</h2>