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

Removed role="document" from the modal dialog (#30755)

Browse Source
This commit is contained in:
Rohit Sharma 2020-05-11 15:15:42 +05:30 committed by XhmikosR
parent bad48dc3b9
commit d2f9fbd055
2 changed files with 26 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
js/tests/visual/modal.html
View File

@ -35,7 +35,7 @@
<h1>Modal <small>Bootstrap Visual Test</small></h1> <h1>Modal <small>Bootstrap Visual Test</small></h1>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
@ -122,7 +122,7 @@
</div> </div>
<div class="modal fade" id="firefoxModal" tabindex="-1" role="dialog" aria-labelledby="firefoxModalLabel" aria-hidden="true"> <div class="modal fade" id="firefoxModal" tabindex="-1" role="dialog" aria-labelledby="firefoxModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
@ -148,7 +148,7 @@
</div> </div>
<div class="modal fade" id="slowModal" tabindex="-1" role="dialog" aria-labelledby="slowModalLabel" aria-hidden="true" style="transition-duration: 5s;"> <div class="modal fade" id="slowModal" tabindex="-1" role="dialog" aria-labelledby="slowModalLabel" aria-hidden="true" style="transition-duration: 5s;">
<div class="modal-dialog" role="document" style="transition-duration: inherit;"> <div class="modal-dialog" style="transition-duration: inherit;">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">

46
site/docs/4.4/components/modal.md
View File

@ -35,7 +35,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
<div class="bd-example bd-example-modal"> <div class="bd-example bd-example-modal">
<div class="modal" tabindex="-1" role="dialog"> <div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Modal title</h5> <h5 class="modal-title">Modal title</h5>
@ -57,7 +57,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
{% highlight html %} {% highlight html %}
<div class="modal" tabindex="-1" role="dialog"> <div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Modal title</h5> <h5 class="modal-title">Modal title</h5>
@ -82,7 +82,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page. Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
<div class="modal fade" id="exampleModalLive" tabindex="-1" role="dialog" aria-labelledby="exampleModalLiveLabel" aria-hidden="true"> <div class="modal fade" id="exampleModalLive" tabindex="-1" role="dialog" aria-labelledby="exampleModalLiveLabel" aria-hidden="true">
<div class="modal-dialog" role="document"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="exampleModalLiveLabel">Modal title</h5> <h5 class="modal-title" id="exampleModalLiveLabel">Modal title</h5>
@ -115,7 +115,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
<!-- Modal --> <!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
@ -140,7 +140,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it. When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.
<div class="modal fade" id="staticBackdropLive" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLiveLabel" aria-hidden="true"> <div class="modal fade" id="staticBackdropLive" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLiveLabel" aria-hidden="true">
<div class="modal-dialog" role="document"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="staticBackdropLiveLabel">Modal title</h5> <h5 class="modal-title" id="staticBackdropLiveLabel">Modal title</h5>
@ -173,7 +173,7 @@ When backdrop is set to static, the modal will not close when clicking outside i
<!-- Modal --> <!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog" role="document"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5> <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
@ -199,7 +199,7 @@ When backdrop is set to static, the modal will not close when clicking outside i
When modals become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean. When modals become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5> <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
@ -244,7 +244,7 @@ When modals become too long for the user's viewport or device, they scroll indep
You can also create a scrollable modal that allows scroll the modal body by adding `.modal-dialog-scrollable` to `.modal-dialog`. You can also create a scrollable modal that allows scroll the modal body by adding `.modal-dialog-scrollable` to `.modal-dialog`.
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true"> <div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable" role="document"> <div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5> <h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
@ -288,7 +288,7 @@ You can also create a scrollable modal that allows scroll the modal body by addi
{% highlight html %} {% highlight html %}
<!-- Scrollable modal --> <!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable" role="document"> <div class="modal-dialog modal-dialog-scrollable">
... ...
</div> </div>
{% endhighlight %} {% endhighlight %}
@ -298,7 +298,7 @@ You can also create a scrollable modal that allows scroll the modal body by addi
Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-dialog modal-dialog-centered">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5> <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
@ -318,7 +318,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
</div> </div>
<div class="modal fade" id="exampleModalCenteredScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenteredScrollableTitle" aria-hidden="true"> <div class="modal fade" id="exampleModalCenteredScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenteredScrollableTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document"> <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="exampleModalCenteredScrollableTitle">Modal title</h5> <h5 class="modal-title" id="exampleModalCenteredScrollableTitle">Modal title</h5>
@ -352,12 +352,12 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
{% highlight html %} {% highlight html %}
<!-- Vertically centered modal --> <!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-dialog modal-dialog-centered">
... ...
</div> </div>
<!-- Vertically centered scrollable modal --> <!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document"> <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
... ...
</div> </div>
{% endhighlight %} {% endhighlight %}
@ -367,7 +367,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
[Tooltips]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/tooltips/) and [popovers]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/popovers/) can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed. [Tooltips]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/tooltips/) and [popovers]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/popovers/) can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.
<div class="modal fade" id="exampleModalPopovers" tabindex="-1" role="dialog" aria-labelledby="exampleModalPopoversLabel" aria-hidden="true"> <div class="modal fade" id="exampleModalPopovers" tabindex="-1" role="dialog" aria-labelledby="exampleModalPopoversLabel" aria-hidden="true">
<div class="modal-dialog" role="document"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="exampleModalPopoversLabel">Modal title</h5> <h5 class="modal-title" id="exampleModalPopoversLabel">Modal title</h5>
@ -411,7 +411,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` within the `.modal-body`. Then, use the normal grid system classes as you would anywhere else. Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` within the `.modal-body`. Then, use the normal grid system classes as you would anywhere else.
<div class="modal fade" id="gridSystemModal" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true"> <div class="modal fade" id="gridSystemModal" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="gridModalLabel">Grids in modals</h5> <h5 class="modal-title" id="gridModalLabel">Grids in modals</h5>
@ -502,7 +502,7 @@ Below is a live demo followed by example HTML and JavaScript. For more informati
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</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 fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5> <h5 class="modal-title" id="exampleModalLabel">New message</h5>
@ -566,7 +566,7 @@ If the height of a modal changes while it is open, you should call `$('#myModal'
### Accessibility ### Accessibility
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`. Be sure to add `role="dialog"` and `aria-labelledby="..."`, referencing the modal title, to `.modal`. Additionally, you may give a description of your modal dialog with `aria-describedby` on `.modal`.
### Embedding YouTube videos ### Embedding YouTube videos
@ -617,13 +617,13 @@ Our default modal without modifier class constitutes the "medium" size modal.
</div> </div>
{% highlight html %} {% highlight html %}
<div class="modal-dialog modal-xl" role="document">...</div> <div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg" role="document">...</div> <div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm" role="document">...</div> <div class="modal-dialog modal-sm">...</div>
{% endhighlight %} {% endhighlight %}
<div class="modal fade" id="exampleModalXl" tabindex="-1" role="dialog" aria-labelledby="exampleModalXlLabel" aria-hidden="true"> <div class="modal fade" id="exampleModalXl" tabindex="-1" role="dialog" aria-labelledby="exampleModalXlLabel" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document"> <div class="modal-dialog modal-xl">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
@ -640,7 +640,7 @@ Our default modal without modifier class constitutes the "medium" size modal.
</div> </div>
<div class="modal fade" id="exampleModalLg" tabindex="-1" role="dialog" aria-labelledby="exampleModalLgLabel" aria-hidden="true"> <div class="modal fade" id="exampleModalLg" tabindex="-1" role="dialog" aria-labelledby="exampleModalLgLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document"> <div class="modal-dialog modal-lg">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
@ -657,7 +657,7 @@ Our default modal without modifier class constitutes the "medium" size modal.
</div> </div>
<div class="modal fade" id="exampleModalSm" tabindex="-1" role="dialog" aria-labelledby="exampleModalSmLabel" aria-hidden="true"> <div class="modal fade" id="exampleModalSm" tabindex="-1" role="dialog" aria-labelledby="exampleModalSmLabel" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document"> <div class="modal-dialog modal-sm">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title h4" id="exampleModalSmLabel">Small modal</h5> <h5 class="modal-title h4" id="exampleModalSmLabel">Small modal</h5>