diff options
-rw-r--r-- | js/tests/visual/modal.html | 8 | ||||
-rw-r--r-- | site/content/docs/5.2/components/modal.md | 56 | ||||
-rw-r--r-- | site/content/docs/5.2/examples/cheatsheet-rtl/index.html | 8 | ||||
-rw-r--r-- | site/content/docs/5.2/examples/cheatsheet/index.html | 8 | ||||
-rw-r--r-- | site/content/docs/5.2/examples/modals/index.html | 6 |
5 files changed, 45 insertions, 41 deletions
diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html index fd93c068ac..b738d9e81b 100644 --- a/js/tests/visual/modal.html +++ b/js/tests/visual/modal.html @@ -38,7 +38,7 @@ <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"> @@ -123,7 +123,7 @@ <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"> @@ -147,7 +147,7 @@ <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"> @@ -188,7 +188,7 @@ 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="<div class="modal fade the-bad" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title">The Bad Modal</h4></div><div class="modal-body">This modal's HTTML source code is declared inline, inside the data-bs-target attribute of it's show-button</div></div></div></div>"> + <button type="button" class="btn btn-secondary btn-lg" data-bs-toggle="modal" data-bs-target="<div class="modal fade the-bad" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h1 class="modal-title fs-4">The Bad Modal</h1></div><div class="modal-body">This modal's HTTML source code is declared inline, inside the data-bs-target attribute of it's show-button</div></div></div></div>"> Modal with an XSS inside the data-bs-target </button> diff --git a/site/content/docs/5.2/components/modal.md b/site/content/docs/5.2/components/modal.md index e1e615ea67..ed31b7374f 100644 --- a/site/content/docs/5.2/components/modal.md +++ b/site/content/docs/5.2/components/modal.md @@ -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. @@ -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"> @@ -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"> @@ -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"> @@ -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"> @@ -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"> @@ -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"> @@ -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"> @@ -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"> @@ -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"> @@ -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> ``` @@ -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"> @@ -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"> @@ -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"> @@ -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"> @@ -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"> @@ -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"> @@ -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"> @@ -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"> @@ -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"> @@ -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"> @@ -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"> @@ -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"> @@ -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"> diff --git a/site/content/docs/5.2/examples/cheatsheet-rtl/index.html b/site/content/docs/5.2/examples/cheatsheet-rtl/index.html index fae87929bb..a05799873a 100644 --- a/site/content/docs/5.2/examples/cheatsheet-rtl/index.html +++ b/site/content/docs/5.2/examples/cheatsheet-rtl/index.html @@ -1539,7 +1539,7 @@ direction: rtl <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"> @@ -1556,7 +1556,7 @@ direction: rtl <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"> @@ -1573,7 +1573,7 @@ direction: rtl <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"> @@ -1596,7 +1596,7 @@ direction: rtl <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"> diff --git a/site/content/docs/5.2/examples/cheatsheet/index.html b/site/content/docs/5.2/examples/cheatsheet/index.html index da6c381e49..a2285d0ed7 100644 --- a/site/content/docs/5.2/examples/cheatsheet/index.html +++ b/site/content/docs/5.2/examples/cheatsheet/index.html @@ -1535,7 +1535,7 @@ body_class: "bg-light" <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"> @@ -1552,7 +1552,7 @@ body_class: "bg-light" <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"> @@ -1569,7 +1569,7 @@ body_class: "bg-light" <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"> @@ -1588,7 +1588,7 @@ body_class: "bg-light" <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"> diff --git a/site/content/docs/5.2/examples/modals/index.html b/site/content/docs/5.2/examples/modals/index.html index 0f16aabf8b..a68bd419e8 100644 --- a/site/content/docs/5.2/examples/modals/index.html +++ b/site/content/docs/5.2/examples/modals/index.html @@ -59,7 +59,7 @@ body_class: "" <div class="modal-dialog" role="document"> <div class="modal-content rounded-4 shadow"> <div class="modal-header border-bottom-0"> - <h5 class="modal-title">Modal title</h5> + <h1 class="modal-title fs-5">Modal title</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body py-0"> @@ -133,8 +133,8 @@ body_class: "" <div class="modal-dialog" role="document"> <div class="modal-content rounded-4 shadow"> <div class="modal-header p-5 pb-4 border-bottom-0"> - <!-- <h5 class="modal-title">Modal title</h5> --> - <h2 class="fw-bold mb-0">Sign up for free</h2> + <!-- <h1 class="modal-title fs-5" >Modal title</h1> --> + <h1 class="fw-bold mb-0 fs-2">Sign up for free</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> |