diff --git a/site/src/content/docs/components/modal.mdx b/site/src/content/docs/components/modal.mdx index bb7eec7efe..01ae93f6cd 100644 --- a/site/src/content/docs/components/modal.mdx +++ b/site/src/content/docs/components/modal.mdx @@ -1,17 +1,17 @@ --- title: Modal -description: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content. +description: Use Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content. toc: true --- ## How it works -Before getting started with Bootstrap’s modal component, be sure to read the following as our menu options have recently changed. +Before getting started with Bootstrap's modal component, be sure to read the following as our menu options have recently changed. -- Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the `` so that modal content scrolls instead. -- Clicking on the modal “backdrop” will automatically close the modal. -- Bootstrap only supports one modal window at a time. Nested modals aren’t supported as we believe them to be poor user experiences. -- Modals use `position: fixed`, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You’ll likely run into issues when nesting a `.modal` within another fixed element. +- Modals are built with HTML, CSS, and JavaScript. They're positioned over everything else in the document and remove scroll from the `` so that modal content scrolls instead. +- Clicking on the modal "backdrop" will automatically close the modal. +- Bootstrap only supports one modal window at a time. Nested modals aren't supported as we believe them to be poor user experiences. +- Modals use `position: fixed`, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You'll likely run into issues when nesting a `.modal` within another fixed element. - Once again, due to `position: fixed`, there are some caveats with using modals on mobile devices. [See our browser support docs]([[docsref:/getting-started/browsers-devices#modals-and-dropdowns-on-mobile]]) for details. - Due to how HTML5 defines its semantics, [the `autofocus` HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autofocus) has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript: @@ -75,7 +75,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee ``` -In the above static example, we use `
`, 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 `

`. 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. +In the above static example, we use `

`, 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 `

`. 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. ### Live demo @@ -90,7 +90,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
-

Woo-hoo, you’re reading this text in a modal!

+

Woo-hoo, you're reading this text in a modal!

@@ -142,7 +142,7 @@ When backdrop is set to static, the modal will not close when clicking outside o
-

I will not close if you click outside of me. Don’t even try to press escape key.

+

I will not close if you click outside of me. Don't even try to press escape key.

@@ -184,7 +184,7 @@ When backdrop is set to static, the modal will not close when clicking outside o ### Scrolling long content -When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean. +When modals become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean. + `} /> ```html -
...
@@ -728,7 +726,7 @@ Another override is the option to pop up a modal that covers the user viewport, -As part of Bootstrap’s evolving CSS variables approach, modals now use local CSS variables on `.modal` and `.modal-backdrop` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. +As part of Bootstrap's evolving CSS variables approach, modals now use local CSS variables on `.modal` and `.modal-backdrop` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. @@ -783,7 +781,7 @@ const myModalAlternative = new bootstrap.Modal('#myModal', options) | Name | Type | Default | Description | | --- | --- | --- | --- | -| `backdrop` | boolean, `’static'` | `true` | Includes a modal-backdrop element. Alternatively, specify `static` for a backdrop which doesn’t close the modal when clicked. | +| `backdrop` | boolean, `'static'` | `true` | Includes a modal-backdrop element. Alternatively, specify `static` for a backdrop which doesn't close the modal when clicked. | | `focus` | boolean | `true` | Puts the focus on the modal when initialized. | | `keyboard` | boolean | `true` | Closes the modal when escape key is pressed. | @@ -805,10 +803,10 @@ const myModal = new bootstrap.Modal('#myModal', { | Method | Description | | --- | --- | -| `dispose` | Destroys an element’s modal. (Removes stored data on the DOM element) | +| `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. | -| `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). | +| `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)`. | | `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). | @@ -816,7 +814,7 @@ const myModal = new bootstrap.Modal('#myModal', { ### Events -Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the `
`). +Bootstrap's modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the `
`). | Event | Description |