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, 27 insertions, 31 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 ed31b7374..aa6012cb0 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,10 +78,6 @@ 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. @@ -90,7 +86,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"> - <h1 class="modal-title fs-5" id="exampleModalLiveLabel">Modal title</h1> + <h5 class="modal-title" id="exampleModalLiveLabel">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -121,7 +117,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"> - <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1> + <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -144,7 +140,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"> - <h1 class="modal-title fs-5" id="staticBackdropLiveLabel">Modal title</h1> + <h5 class="modal-title" id="staticBackdropLiveLabel">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -175,7 +171,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"> - <h1 class="modal-title fs-5" id="staticBackdropLabel">Modal title</h1> + <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -198,7 +194,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"> - <h1 class="modal-title fs-5" id="exampleModalLongTitle">Modal title</h1> + <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body" style="min-height: 1500px"> @@ -224,7 +220,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"> - <h1 class="modal-title fs-5" id="exampleModalScrollableTitle">Modal title</h1> + <h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -261,7 +257,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"> - <h1 class="modal-title fs-5" id="exampleModalCenterTitle">Modal title</h1> + <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -279,7 +275,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"> - <h1 class="modal-title fs-5" id="exampleModalCenteredScrollableTitle">Modal title</h1> + <h5 class="modal-title" id="exampleModalCenteredScrollableTitle">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -324,14 +320,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"> - <h1 class="modal-title fs-5" id="exampleModalPopoversLabel">Modal title</h1> + <h5 class="modal-title" id="exampleModalPopoversLabel">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> - <h2 class="fs-5">Popover in a modal</h2> + <h5>Popover in a modal</h5> <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> - <h2 class="fs-5">Tooltips in a modal</h2> + <h5>Tooltips in a modal</h5> <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"> @@ -350,10 +346,10 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. ```html <div class="modal-body"> - <h2 class="fs-5">Popover in a modal</h2> + <h5>Popover in a modal</h5> <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> - <h2 class="fs-5">Tooltips in a modal</h2> + <h5>Tooltips in a modal</h5> <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> ``` @@ -366,7 +362,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"> - <h1 class="modal-title fs-5" id="gridModalLabel">Grids in modals</h1> + <h5 class="modal-title" id="gridModalLabel">Grids in modals</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -457,7 +453,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"> - <h1 class="modal-title fs-5" id="exampleModalLabel">New message</h1> + <h5 class="modal-title" id="exampleModalLabel">New message</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -509,7 +505,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"> - <h1 class="modal-title fs-5" id="exampleModalToggleLabel">Modal 1</h1> + <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -525,7 +521,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"> - <h1 class="modal-title fs-5" id="exampleModalToggleLabel2">Modal 2</h1> + <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -599,7 +595,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"> - <h1 class="modal-title fs-4" id="exampleModalXlLabel">Extra large modal</h1> + <h5 class="modal-title h4" id="exampleModalXlLabel">Extra large modal</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -613,7 +609,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"> - <h1 class="modal-title fs-4" id="exampleModalLgLabel">Large modal</h1> + <h5 class="modal-title h4" id="exampleModalLgLabel">Large modal</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -627,7 +623,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"> - <h1 class="modal-title fs-4" id="exampleModalSmLabel">Small modal</h1> + <h5 class="modal-title h4" id="exampleModalSmLabel">Small modal</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -672,7 +668,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"> - <h1 class="modal-title fs-4" id="exampleModalFullscreenLabel">Full screen modal</h1> + <h5 class="modal-title h4" id="exampleModalFullscreenLabel">Full screen modal</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -689,7 +685,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"> - <h1 class="modal-title fs-4" id="exampleModalFullscreenSmLabel">Full screen below sm</h1> + <h5 class="modal-title h4" id="exampleModalFullscreenSmLabel">Full screen below sm</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -706,7 +702,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"> - <h1 class="modal-title fs-4" id="exampleModalFullscreenMdLabel">Full screen below md</h1> + <h5 class="modal-title h4" id="exampleModalFullscreenMdLabel">Full screen below md</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -723,7 +719,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"> - <h1 class="modal-title fs-4" id="exampleModalFullscreenLgLabel">Full screen below lg</h1> + <h5 class="modal-title h4" id="exampleModalFullscreenLgLabel">Full screen below lg</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -740,7 +736,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"> - <h1 class="modal-title fs-4" id="exampleModalFullscreenXlLabel">Full screen below xl</h1> + <h5 class="modal-title h4" id="exampleModalFullscreenXlLabel">Full screen below xl</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -757,7 +753,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"> - <h1 class="modal-title fs-4" id="exampleModalFullscreenXxlLabel">Full screen below xxl</h1> + <h5 class="modal-title h4" id="exampleModalFullscreenXxlLabel">Full screen below xxl</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -862,7 +858,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 >}} |