diff options
Diffstat (limited to '')
| -rw-r--r-- | site/content/docs/5.3/components/modal.md (renamed from site/content/docs/5.2/components/modal.md) | 43 |
1 files changed, 13 insertions, 30 deletions
diff --git a/site/content/docs/5.2/components/modal.md b/site/content/docs/5.3/components/modal.md index ed31b73..ba2a51a 100644 --- a/site/content/docs/5.2/components/modal.md +++ b/site/content/docs/5.3/components/modal.md @@ -27,7 +27,7 @@ myModal.addEventListener('shown.bs.modal', () => { ``` {{< callout info >}} -{{< partial "callout-info-prefersreducedmotion.md" >}} +{{< partial "callouts/info-prefersreducedmotion.md" >}} {{< /callout >}} Keep reading for demos and usage guidelines. @@ -38,7 +38,7 @@ Keep reading for demos and usage guidelines. Below is a _static_ modal example (meaning its `position` and `display` have been overridden). Included are the modal header, modal body (required for `padding`), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action. -<div class="bd-example bg-light"> +<div class="bd-example bg-body-tertiary"> <div class="modal position-static d-block" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> @@ -202,7 +202,7 @@ When modals become too long for the user's viewport or device, they scroll indep <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body" style="min-height: 1500px"> - <p>This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text the modal, we use an inline style set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.</p> + <p>This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the modal, we use an inline style to set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> @@ -329,7 +329,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. </div> <div class="modal-body"> <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> + <p>This <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</button> triggers a popover on click.</p> <hr> <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> @@ -351,7 +351,7 @@ 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> - <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> + <p>This <button class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</button> triggers a popover on click.</p> <hr> <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> @@ -481,24 +481,7 @@ Below is a live demo followed by example HTML and JavaScript. For more informati </div> {{< /example >}} -```js -const exampleModal = document.getElementById('exampleModal') -exampleModal.addEventListener('show.bs.modal', event => { - // Button that triggered the modal - const button = event.relatedTarget - // Extract info from data-bs-* attributes - const recipient = button.getAttribute('data-bs-whatever') - // If necessary, you could initiate an AJAX request here - // and then do the updating in a callback. - // - // Update the modal's content. - const modalTitle = exampleModal.querySelector('.modal-title') - const modalBodyInput = exampleModal.querySelector('.modal-body input') - - modalTitle.textContent = `New message to ${recipient}` - modalBodyInput.value = recipient -}) -``` +{{< js-docs name="varying-modal-content" file="site/assets/js/snippets.js" >}} ### Toggle between modals @@ -537,7 +520,7 @@ Toggle between multiple modals with some clever placement of the `data-bs-target </div> </div> </div> -<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a> +<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Open first modal</button> {{< /example >}} ### Change animation @@ -576,7 +559,7 @@ Modals have three optional sizes, available via modifier classes to be placed on | Size | Class | Modal max-width | --- | --- | --- | | Small | `.modal-sm` | `300px` | -| Default | <span class="text-muted">None</span> | `500px` | +| Default | <span class="text-body-secondary">None</span> | `500px` | | Large | `.modal-lg` | `800px` | | Extra large | `.modal-xl` | `1140px` | {{< /bs-table >}} @@ -643,7 +626,7 @@ Another override is the option to pop up a modal that covers the user viewport, {{< bs-table >}} | Class | Availability | -| --- | --- | --- | +| --- | --- | | `.modal-fullscreen` | Always | | `.modal-fullscreen-sm-down` | `576px` | | `.modal-fullscreen-md-down` | `768px` | @@ -786,7 +769,7 @@ As part of Bootstrap's evolving CSS variables approach, modals now use local CSS {{< scss-docs name="modal-variables" file="scss/_variables.scss" >}} -### Loop +### Sass loops [Responsive fullscreen modals](#fullscreen-modal) are generated via the `$breakpoints` map and a loop in `scss/_modal.scss`. @@ -841,7 +824,7 @@ const myModalAlternative = new bootstrap.Modal('#myModal', options) ### Methods {{< callout danger >}} -{{< partial "callout-danger-async-methods.md" >}} +{{< partial "callouts/danger-async-methods.md" >}} {{< /callout >}} #### Passing options @@ -858,8 +841,8 @@ const myModal = new bootstrap.Modal('#myModal', { | Method | Description | | --- | --- | | `dispose` | Destroys an element's modal. (Removes stored data on the DOM element) | -| `getInstance` | *Static* method which allows you to get the modal instance associated with a DOM element. | -| `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. | +| `getInstance` | _Static_ method which allows you to get the modal instance associated with a DOM element. | +| `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)`. | |