diff options
| author | Kyle Tsang <[email protected]> | 2020-09-29 11:56:01 -0700 |
|---|---|---|
| committer | GitHub <[email protected]> | 2020-09-29 21:56:01 +0300 |
| commit | 905b1b11b3352f98a97fc1d72e0455daec9e3253 (patch) | |
| tree | 0312a04680df1697636457b581d1eee5b297798a | |
| parent | 0cb880c7fbd93d262a29e4660975d5c8cc0b9676 (diff) | |
| download | bootstrap-905b1b11b3352f98a97fc1d72e0455daec9e3253.tar.xz bootstrap-905b1b11b3352f98a97fc1d72e0455daec9e3253.zip | |
docs(Modal): Add xxl fullscreen example (#31583)
* docs(Modal): Add xxl fullscreen example
* Update modal.md
Co-authored-by: XhmikosR <[email protected]>
| -rw-r--r-- | site/content/docs/5.0/components/modal.md | 22 |
1 files changed, 22 insertions, 0 deletions
diff --git a/site/content/docs/5.0/components/modal.md b/site/content/docs/5.0/components/modal.md index bb00382a2..d1815e170 100644 --- a/site/content/docs/5.0/components/modal.md +++ b/site/content/docs/5.0/components/modal.md @@ -683,6 +683,10 @@ Another override is the option to pop up a modal that covers the user viewport, <td><code>.modal-fullscreen-xl-down</code></td> <td>Below <code>1200px</code></td> </tr> + <tr> + <td><code>.modal-fullscreen-xxl-down</code></td> + <td>Below <code>1400px</code></td> + </tr> </tbody> </table> @@ -692,6 +696,7 @@ Another override is the option to pop up a modal that covers the user viewport, <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalFullscreenMd">Full screen below md</button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalFullscreenLg">Full screen below lg</button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalFullscreenXl">Full screen below xl</button> + <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalFullscreenXxl">Full screen below xxl</button> </div> {{< highlight html >}} @@ -803,6 +808,23 @@ Another override is the option to pop up a modal that covers the user viewport, </div> </div> +<div class="modal fade" id="exampleModalFullscreenXxl" tabindex="-1" aria-labelledby="exampleModalFullscreenXxlLabel" aria-hidden="true"> + <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> + <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button> + </div> + <div class="modal-body"> + ... + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + </div> + </div> + </div> +</div> + ## Usage The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds `.modal-open` to the `<body>` to override default scrolling behavior and generates a `.modal-backdrop` to provide a click area for dismissing shown modals when clicking outside the modal. |