From a9a89debc7535a1c5857ced28c1002a2f682889f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 14 Mar 2022 00:38:04 -0700 Subject: Rewrite docs tables in Markdown with table shortcode (#31337) Co-authored-by: XhmikosR Co-authored-by: GeoSot --- site/content/docs/5.1/components/modal.md | 234 ++++++------------------------ 1 file changed, 45 insertions(+), 189 deletions(-) (limited to 'site/content/docs/5.1/components/modal.md') diff --git a/site/content/docs/5.1/components/modal.md b/site/content/docs/5.1/components/modal.md index e591f5b9b6..6facc239c5 100644 --- a/site/content/docs/5.1/components/modal.md +++ b/site/content/docs/5.1/components/modal.md @@ -568,37 +568,14 @@ Embedding YouTube videos in modals requires additional JavaScript not in Bootstr Modals have three optional sizes, available via modifier classes to be placed on a `.modal-dialog`. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SizeClassModal max-width
Small.modal-sm300px
DefaultNone500px
Large.modal-lg800px
Extra large.modal-xl1140px
+{{< bs-table "table" >}} +| Size | Class | Modal max-width +| --- | --- | --- | +| Small | `.modal-sm` | `300px` | +| Default | None | `500px` | +| Large | `.modal-lg` | `800px` | +| Extra large | `.modal-xl` | `1140px` | +{{< /bs-table >}} Our default modal without modifier class constitutes the "medium" size modal. @@ -660,40 +637,16 @@ Our default modal without modifier class constitutes the "medium" size modal. Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a `.modal-dialog`. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassAvailability
.modal-fullscreenAlways
.modal-fullscreen-sm-downBelow 576px
.modal-fullscreen-md-downBelow 768px
.modal-fullscreen-lg-downBelow 992px
.modal-fullscreen-xl-downBelow 1200px
.modal-fullscreen-xxl-downBelow 1400px
+{{< bs-table >}} +| Class | Availability | +| --- | --- | --- | +| `.modal-fullscreen` | Always | +| `.modal-fullscreen-sm-down` | `576px` | +| `.modal-fullscreen-md-down` | `768px` | +| `.modal-fullscreen-lg-down` | `992px` | +| `.modal-fullscreen-xl-down` | `1200px` | +| `.modal-fullscreen-xxl-down` | `1400px` | +{{< /bs-table >}}
@@ -859,36 +812,13 @@ var myModal = new bootstrap.Modal(document.getElementById('myModal'), options) Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-backdrop=""`. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
backdropboolean or the string 'static'trueIncludes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal when clicked.
keyboardbooleantrueCloses the modal when escape key is pressed
focusbooleantruePuts the focus on the modal when initialized.
+{{< bs-table "table" >}} +| 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. | +| `keyboard` | boolean | `true` | Closes the modal when escape key is pressed. | +| `focus` | boolean | `true` | Puts the focus on the modal when initialized. | +{{< /bs-table >}} ### Methods @@ -906,105 +836,31 @@ var myModal = new bootstrap.Modal(document.getElementById('myModal'), { }) ``` -#### 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). - -```js -myModal.toggle() -``` - -#### 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). - -```js -myModal.show() -``` - -Also, you can pass a DOM element as an argument that can be received in the modal events (as the `relatedTarget` property). - -```js -var modalToggle = document.getElementById('toggleMyModal') // relatedTarget -myModal.show(modalToggle) -``` - -#### 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). - -```js -myModal.hide() -``` - -#### 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). - -```js -myModal.handleUpdate() -``` - -#### dispose - -Destroys an element's modal. (Removes stored data on the DOM element) - -```js -myModal.dispose() -``` - -#### getInstance - -*Static* method which allows you to get the modal instance associated with a DOM element - -```js -var myModalEl = document.getElementById('myModal') -var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance -``` - -#### 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 - -```js -var myModalEl = document.querySelector('#myModal') -var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance -``` +{{< bs-table "table" >}} +| Method | Description | +| --- | --- | +| `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). | +| `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. `var modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)` | +| `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). | +| `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). | +| `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. | +{{< /bs-table >}} ### 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 `
`). - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Event typeDescription
show.bs.modalThis event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
shown.bs.modalThis event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
hide.bs.modalThis event is fired immediately when the hide instance method has been called.
hidden.bs.modalThis event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
hidePrevented.bs.modalThis event is fired when the modal is shown, its backdrop is static and a click outside of the modal is performed. The event is also fired when the escape key is pressed and the keyboard option is set to false.
+{{< bs-table >}} +| Event | Description | +| --- | --- | +| `show.bs.modal` | This event fires immediately when the `show` instance method is called. If caused by a click, the clicked element is available as the `relatedTarget` property of the event. | +| `shown.bs.modal` | This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the `relatedTarget` property of the event. | +| `hide.bs.modal` | This event is fired immediately when the `hide` instance method has been called. | +| `hidden.bs.modal` | This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). | +| `hidePrevented.bs.modal` | This event is fired when the modal is shown, its backdrop is `static` and a click outside of the modal is performed. The event is also fired when the escape key is pressed and the `keyboard` option is set to `false`. | +{{< /bs-table >}} ```js var myModalEl = document.getElementById('myModal') -- cgit v1.2.3