mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-22 13:13:03 +02:00
Code Issues Releases Wiki Activity

docs(Modal): Add xxl fullscreen example (#31583)

Browse Source 
* docs(Modal): Add xxl fullscreen example

* Update modal.md

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
Kyle Tsang
2020-09-29 11:56:01 -07:00
committed by GitHub
parent 0cb880c7fb
commit 905b1b11b3
1 changed files with 22 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
site/content/docs/5.0/components/modal.md
View File

@@ -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><code>.modal-fullscreen-xl-down</code></td>
<td>Below <code>1200px</code></td> <td>Below <code>1200px</code></td>
</tr> </tr>
<tr>
<td><code>.modal-fullscreen-xxl-down</code></td>
<td>Below <code>1400px</code></td>
</tr>
</tbody> </tbody>
</table> </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="#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="#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="#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> </div>
{{< highlight html >}} {{< highlight html >}}
@@ -803,6 +808,23 @@ Another override is the option to pop up a modal that covers the user viewport,
</div> </div>
</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 ## 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. 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.