diff options
| author | Mark Otto <[email protected]> | 2015-06-18 23:56:43 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2015-06-18 23:56:43 -0700 |
| commit | 169d2a4a78776ddaa4fec774691a3c5f03aa3eda (patch) | |
| tree | 997248da2a627a3ef3478dd0f8f8077267c56e22 /docs/components/modal.md | |
| parent | df2ca92d7704d54a15be54e5da8086712bd18680 (diff) | |
| parent | 1e64692716985246f70c89bcf8d5119e17a353c0 (diff) | |
| download | bootstrap-169d2a4a78776ddaa4fec774691a3c5f03aa3eda.tar.xz bootstrap-169d2a4a78776ddaa4fec774691a3c5f03aa3eda.zip | |
Merge branch 'master' into v4
Diffstat (limited to 'docs/components/modal.md')
| -rw-r--r-- | docs/components/modal.md | 16 |
1 files changed, 8 insertions, 8 deletions
diff --git a/docs/components/modal.md b/docs/components/modal.md index 80d0820fc..5a618d8a6 100644 --- a/docs/components/modal.md +++ b/docs/components/modal.md @@ -19,7 +19,7 @@ $('#myModal').on('shown.bs.modal', function () { {% endhighlight %} {% callout warning %} -#### Overlapping modals not supported +#### Multiple open modals not supported Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code. {% endcallout %} @@ -42,7 +42,7 @@ A rendered modal with header, body, and set of actions in the footer.</p> <div class="bd-example bd-example-modal"> <div class="modal"> - <div class="modal-dialog"> + <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> @@ -65,7 +65,7 @@ A rendered modal with header, body, and set of actions in the footer.</p> {% highlight html %} <div class="modal fade"> - <div class="modal-dialog"> + <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> @@ -91,7 +91,7 @@ A rendered modal with header, body, and set of actions in the footer.</p> Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page. <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> - <div class="modal-dialog"> + <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> @@ -147,7 +147,7 @@ Toggle a modal via JavaScript by clicking the button below. It will slide down a <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> - <div class="modal-dialog"> + <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> @@ -171,7 +171,7 @@ Toggle a modal via JavaScript by clicking the button below. It will slide down a {% callout warning %} #### Make modals accessible -Be sure to add `role="dialog"` to `.modal`, `aria-labelledby="myModalLabel"` attribute to reference the modal title, and `aria-hidden="true"` to tell assistive technologies to skip the modal's DOM elements. +Be sure to add `role="dialog"` and `aria-labelledby="..."``, referencing the modal title, to `.modal`, and `role="document"` to the `.modal-dialog` itself. Additionally, you may give a description of your modal dialog with `aria-describedby` on `.modal`. {% endcallout %} @@ -267,7 +267,7 @@ To take advantage of the Bootstrap grid system within a modal, just nest `.conta {% example html %} <div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true"> - <div class="modal-dialog"> + <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> @@ -325,7 +325,7 @@ Have a bunch of buttons that all trigger the same modal, just with slightly diff <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> - <div class="modal-dialog"> + <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
