diff options
Diffstat (limited to 'vendor/twbs/bootstrap/site/content/docs/5.2/components/modal.md')
-rw-r--r-- | vendor/twbs/bootstrap/site/content/docs/5.2/components/modal.md | 58 |
1 files changed, 31 insertions, 27 deletions
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/components/modal.md b/vendor/twbs/bootstrap/site/content/docs/5.2/components/modal.md index aa6012cb0..ed31b7374 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/components/modal.md +++ b/vendor/twbs/bootstrap/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"> @@ -858,7 +862,7 @@ const myModal = new bootstrap.Modal('#myModal', { | `getOrCreateInstance` | *Static* method which allows you to get the modal instance associated with a DOM element, or create a new one in case it wasn't initialized. | | `handleUpdate` | Manually readjust the modal's position if the height of a modal changes while it is open (i.e. in case a scrollbar appears). | | `hide` | Manually hides a modal. **Returns to the caller before the modal has actually been hidden** (i.e. before the `hidden.bs.modal` event occurs). | -| `show` | Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs). Also, you can pass a DOM element as an argument that can be received in the modal events (as the `relatedTarget` property). (i.e. `const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)` | +| `show` | Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs). Also, you can pass a DOM element as an argument that can be received in the modal events (as the `relatedTarget` property). (i.e. `const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)`. | | `toggle` | Manually toggles a modal. **Returns to the caller before the modal has actually been shown or hidden** (i.e. before the `shown.bs.modal` or `hidden.bs.modal` event occurs). | {{< /bs-table >}} |