diff options
| author | Mark Otto <[email protected]> | 2015-06-19 16:26:33 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2015-06-19 16:26:33 -0700 |
| commit | bc29c016b7afefa2a9a42e94efaee58695049285 (patch) | |
| tree | ac294f7fbc18d4ba8c6b4179b7d1cbeb6481d70b /docs/components/modal.md | |
| parent | 8410afe0e104459a613f6232ad46334aa8b99fda (diff) | |
| parent | 3df2d085ed219a16848b96e90a72fcd5575a5270 (diff) | |
| download | bootstrap-bc29c016b7afefa2a9a42e94efaee58695049285.tar.xz bootstrap-bc29c016b7afefa2a9a42e94efaee58695049285.zip | |
Merge branch 'v4' into v4_builds
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"> |
