Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use <h1> for all modal-title examples/uses #37210

Merged
merged 2 commits into from Oct 2, 2022
Merged

Use <h1> for all modal-title examples/uses #37210

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6eaf6d0
Use `<h1>` for all `modal-title` examples/uses
patrickhlauke Sep 26, 2022
75fe16e
Merge branch 'main' into patrickhlauke-issue37179
julien-deramond Oct 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 4 additions & 4 deletions js/tests/visual/modal.html
View file
Open in desktop
Expand Up @@ -38,7 +38,7 @@ <h1>Modal <small>Bootstrap Visual Test</small></h1>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
<h1 class="modal-title fs-4" id="myModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Expand Down Expand Up @@ -123,7 +123,7 @@ <h4>Overflowing text to show scroll behavior</h4>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="firefoxModalLabel">Firefox Bug Test</h4>
<h1 class="modal-title fs-4" id="firefoxModalLabel">Firefox Bug Test</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Expand All @@ -147,7 +147,7 @@ <h4 class="modal-title" id="firefoxModalLabel">Firefox Bug Test</h4>
<div class="modal-dialog" style="transition-duration: inherit;">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="slowModalLabel">Lorem slowly</h4>
<h1 class="modal-title fs-4" id="slowModalLabel">Lorem slowly</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Expand Down Expand Up @@ -188,7 +188,7 @@ <h4 class="modal-title" id="slowModalLabel">Lorem slowly</h4>
Tall body content to force the page to have a scrollbar.
</div>

<button type="button" class="btn btn-secondary btn-lg" data-bs-toggle="modal" data-bs-target="&#x3C;div class=&#x22;modal fade the-bad&#x22; tabindex=&#x22;-1&#x22;&#x3E;&#x3C;div class=&#x22;modal-dialog&#x22;&#x3E;&#x3C;div class=&#x22;modal-content&#x22;&#x3E;&#x3C;div class=&#x22;modal-header&#x22;&#x3E;&#x3C;button type=&#x22;button&#x22; class=&#x22;btn-close&#x22; data-bs-dismiss=&#x22;modal&#x22; aria-label=&#x22;Close&#x22;&#x3E;&#x3C;span aria-hidden=&#x22;true&#x22;&#x3E;&#x26;times;&#x3C;/span&#x3E;&#x3C;/button&#x3E;&#x3C;h4 class=&#x22;modal-title&#x22;&#x3E;The Bad Modal&#x3C;/h4&#x3E;&#x3C;/div&#x3E;&#x3C;div class=&#x22;modal-body&#x22;&#x3E;This modal&#x27;s HTTML source code is declared inline, inside the data-bs-target attribute of it&#x27;s show-button&#x3C;/div&#x3E;&#x3C;/div&#x3E;&#x3C;/div&#x3E;&#x3C;/div&#x3E;">
<button type="button" class="btn btn-secondary btn-lg" data-bs-toggle="modal" data-bs-target="&#x3C;div class=&#x22;modal fade the-bad&#x22; tabindex=&#x22;-1&#x22;&#x3E;&#x3C;div class=&#x22;modal-dialog&#x22;&#x3E;&#x3C;div class=&#x22;modal-content&#x22;&#x3E;&#x3C;div class=&#x22;modal-header&#x22;&#x3E;&#x3C;button type=&#x22;button&#x22; class=&#x22;btn-close&#x22; data-bs-dismiss=&#x22;modal&#x22; aria-label=&#x22;Close&#x22;&#x3E;&#x3C;span aria-hidden=&#x22;true&#x22;&#x3E;&#x26;times;&#x3C;/span&#x3E;&#x3C;/button&#x3E;&#x3C;h1 class=&#x22;modal-title fs-4&#x22;&#x3E;The Bad Modal&#x3C;/h1&#x3E;&#x3C;/div&#x3E;&#x3C;div class=&#x22;modal-body&#x22;&#x3E;This modal&#x27;s HTTML source code is declared inline, inside the data-bs-target attribute of it&#x27;s show-button&#x3C;/div&#x3E;&#x3C;/div&#x3E;&#x3C;/div&#x3E;&#x3C;/div&#x3E;">
Modal with an XSS inside the data-bs-target
</button>

Expand Down
56 changes: 30 additions & 26 deletions site/content/docs/5.2/components/modal.md
View file
Open in desktop
Expand Up @@ -78,6 +78,10 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
</div>
```

{{< callout info >}}
In the above static example, we use `<h5>`, to avoid issues with the heading hierarchy in the documentation page. Structurally, however, a modal dialog represents its own separate document/context, so the `.modal-title` should ideally be an `<h1>`. If necessary, you can use the [font size utilities]({{< docsref "/utilities/text#font-size" >}}) to control the heading's appearance. All the following live examples use this approach.
{{< /callout >}}

### Live demo

Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
Expand All @@ -86,7 +90,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLiveLabel">Modal title</h5>
<h1 class="modal-title fs-5" id="exampleModalLiveLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Expand Down Expand Up @@ -117,7 +121,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Expand All @@ -140,7 +144,7 @@ When backdrop is set to static, the modal will not close when clicking outside o
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLiveLabel">Modal title</h5>
<h1 class="modal-title fs-5" id="staticBackdropLiveLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Expand Down Expand Up @@ -171,7 +175,7 @@ When backdrop is set to static, the modal will not close when clicking outside o
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<h1 class="modal-title fs-5" id="staticBackdropLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Expand All @@ -194,7 +198,7 @@ When modals become too long for the user's viewport or device, they scroll indep
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<h1 class="modal-title fs-5" id="exampleModalLongTitle">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" style="min-height: 1500px">
Expand All @@ -220,7 +224,7 @@ You can also create a scrollable modal that allows scroll the modal body by addi
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
<h1 class="modal-title fs-5" id="exampleModalScrollableTitle">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Expand Down Expand Up @@ -257,7 +261,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
<h1 class="modal-title fs-5" id="exampleModalCenterTitle">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Expand All @@ -275,7 +279,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenteredScrollableTitle">Modal title</h5>
<h1 class="modal-title fs-5" id="exampleModalCenteredScrollableTitle">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Expand Down Expand Up @@ -320,14 +324,14 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalPopoversLabel">Modal title</h5>
<h1 class="modal-title fs-5" id="exampleModalPopoversLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h5>Popover in a modal</h5>
<h2 class="fs-5">Popover in a modal</h2>
<p>This <a href="#" role="button" class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute." data-bs-container="#exampleModalPopovers">button</a> triggers a popover on click.</p>
<hr>
<h5>Tooltips in a modal</h5>
<h2 class="fs-5">Tooltips in a modal</h2>
<p><a href="#" data-bs-toggle="tooltip" title="Tooltip" data-bs-container="#exampleModalPopovers">This link</a> and <a href="#" data-bs-toggle="tooltip" title="Tooltip" data-bs-container="#exampleModalPopovers">that link</a> have tooltips on hover.</p>
</div>
<div class="modal-footer">
Expand All @@ -346,10 +350,10 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.

```html
<div class="modal-body">
<h5>Popover in a modal</h5>
<h2 class="fs-5">Popover in a modal</h2>
<p>This <a href="#" role="button" class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
<hr>
<h5>Tooltips in a modal</h5>
<h2 class="fs-5">Tooltips in a modal</h2>
<p><a href="#" data-bs-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" data-bs-toggle="tooltip" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>
```
Expand All @@ -362,7 +366,7 @@ Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` w
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="gridModalLabel">Grids in modals</h5>
<h1 class="modal-title fs-5" id="gridModalLabel">Grids in modals</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Expand Down Expand Up @@ -453,7 +457,7 @@ Below is a live demo followed by example HTML and JavaScript. For more informati
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<h1 class="modal-title fs-5" id="exampleModalLabel">New message</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Expand Down Expand Up @@ -505,7 +509,7 @@ Toggle between multiple modals with some clever placement of the `data-bs-target
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
<h1 class="modal-title fs-5" id="exampleModalToggleLabel">Modal 1</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Expand All @@ -521,7 +525,7 @@ Toggle between multiple modals with some clever placement of the `data-bs-target
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
<h1 class="modal-title fs-5" id="exampleModalToggleLabel2">Modal 2</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Expand Down Expand Up @@ -595,7 +599,7 @@ Our default modal without modifier class constitutes the "medium" size modal.
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalXlLabel">Extra large modal</h5>
<h1 class="modal-title fs-4" id="exampleModalXlLabel">Extra large modal</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Expand All @@ -609,7 +613,7 @@ Our default modal without modifier class constitutes the "medium" size modal.
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalLgLabel">Large modal</h5>
<h1 class="modal-title fs-4" id="exampleModalLgLabel">Large modal</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Expand All @@ -623,7 +627,7 @@ Our default modal without modifier class constitutes the "medium" size modal.
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalSmLabel">Small modal</h5>
<h1 class="modal-title fs-4" id="exampleModalSmLabel">Small modal</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Expand Down Expand Up @@ -668,7 +672,7 @@ Another override is the option to pop up a modal that covers the user viewport,
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalFullscreenLabel">Full screen modal</h5>
<h1 class="modal-title fs-4" id="exampleModalFullscreenLabel">Full screen modal</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Expand All @@ -685,7 +689,7 @@ Another override is the option to pop up a modal that covers the user viewport,
<div class="modal-dialog modal-fullscreen-sm-down">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalFullscreenSmLabel">Full screen below sm</h5>
<h1 class="modal-title fs-4" id="exampleModalFullscreenSmLabel">Full screen below sm</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Expand All @@ -702,7 +706,7 @@ Another override is the option to pop up a modal that covers the user viewport,
<div class="modal-dialog modal-fullscreen-md-down">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalFullscreenMdLabel">Full screen below md</h5>
<h1 class="modal-title fs-4" id="exampleModalFullscreenMdLabel">Full screen below md</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Expand All @@ -719,7 +723,7 @@ Another override is the option to pop up a modal that covers the user viewport,
<div class="modal-dialog modal-fullscreen-lg-down">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalFullscreenLgLabel">Full screen below lg</h5>
<h1 class="modal-title fs-4" id="exampleModalFullscreenLgLabel">Full screen below lg</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Expand All @@ -736,7 +740,7 @@ Another override is the option to pop up a modal that covers the user viewport,
<div class="modal-dialog modal-fullscreen-xl-down">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalFullscreenXlLabel">Full screen below xl</h5>
<h1 class="modal-title fs-4" id="exampleModalFullscreenXlLabel">Full screen below xl</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Expand All @@ -753,7 +757,7 @@ Another override is the option to pop up a modal that covers the user viewport,
<div class="modal-dialog modal-fullscreen-xxl-down">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalFullscreenXxlLabel">Full screen below xxl</h5>
<h1 class="modal-title fs-4" id="exampleModalFullscreenXxlLabel">Full screen below xxl</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Expand Down
8 changes: 4 additions & 4 deletions site/content/docs/5.2/examples/cheatsheet-rtl/index.html
View file
Open in desktop
Expand Up @@ -1539,7 +1539,7 @@ <h3>التلميحات</h3>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">عنوان الصندوق العائم</h5>
<h1 class="modal-title fs-5" id="exampleModalLabel">عنوان الصندوق العائم</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
</div>
<div class="modal-body">
Expand All @@ -1556,7 +1556,7 @@ <h5 class="modal-title" id="exampleModalLabel">عنوان الصندوق الع
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLiveLabel">عنوان الصندوق العائم</h5>
<h1 class="modal-title fs-5" id="staticBackdropLiveLabel">عنوان الصندوق العائم</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
</div>
<div class="modal-body">
Expand All @@ -1573,7 +1573,7 @@ <h5 class="modal-title" id="staticBackdropLiveLabel">عنوان الصندوق
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenteredScrollableTitle">عنوان الصندوق العائم</h5>
<h1 class="modal-title fs-5" id="exampleModalCenteredScrollableTitle">عنوان الصندوق العائم</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
</div>
<div class="modal-body">
Expand All @@ -1596,7 +1596,7 @@ <h5 class="modal-title" id="exampleModalCenteredScrollableTitle">عنوان ال
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalFullscreenLabel">صندوق عائم يملأ الشاشة</h5>
<h1 class="modal-title fs-4" id="exampleModalFullscreenLabel">صندوق عائم يملأ الشاشة</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
</div>
<div class="modal-body">
Expand Down