From e138decdbb3597813c762995753db52abfbc76fb Mon Sep 17 00:00:00 2001 From: gsoti Date: Tue, 23 Apr 2019 17:03:59 +0300 Subject: Add Full-Screen size to Modal and Responsive variations for breakpoints (Works from breakpoint and down) --- site/content/docs/4.3/components/modal.md | 156 ++++++++++++++++++++++++++++++ 1 file changed, 156 insertions(+) (limited to 'site/content/docs') diff --git a/site/content/docs/4.3/components/modal.md b/site/content/docs/4.3/components/modal.md index 6789ccc7c..a5732c6a0 100644 --- a/site/content/docs/4.3/components/modal.md +++ b/site/content/docs/4.3/components/modal.md @@ -678,6 +678,162 @@ Our default modal without modifier class constitutes the "medium" size modal. +## Fullscreen 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`. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Availability
`.modal-fullscreen`	Always
`.modal-fullscreen-xl-down`	`Below 1200px`
`.modal-fullscreen-lg-down`	`Below 992px`
`.modal-fullscreen-md-down`	`Below 768px`
`.modal-fullscreen-sm-down`	`Below 576px`

+ +

+ + + + + +

+ +{{< highlight html >}} + + + + +{{< /highlight >}} + + + + + + + + + + + ## Usage The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds `.modal-open` to the `` to override default scrolling behavior and generates a `.modal-backdrop` to provide a click area for dismissing shown modals when clicking outside the modal. -- cgit v1.2.3