FullscreenModal

Edit this page Leave feedback

The fullscreen ModalDialog composition. FullscreenModal passes all of its props through to an underlying ModalDialog component providing some limited customization. If you have unique needs, use the ModalDialog compound component family directly.

Basic Usage

Show editable code example

Any Paragon component or export may be added to the code example.

() => {
  const [isOpen, open, close] = useToggle(false);
  return (
    <>
      <Button variant="outline-primary" onClick={open}>Open fullscreen modal</Button>

      <FullscreenModal
        title="My dialog"
        isOpen={isOpen}
        onClose={close}
        footerNode={(
          <ActionRow>
            <p className="x-small text-muted">
              Please note, there are a limited number of fashion axe's.
            </p>
            <ActionRow.Spacer />
            <Button variant="tertiary" onClick={close}>Cancel</Button>
            <Button>Submit</Button>
          </ActionRow>
        )}
      >
        <Container size="md">
          <p>
            I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever. Beard man braid migas single-origin coffee forage ramps. Tumeric messenger bag bicycle rights wayfarers, try-hard cronut blue bottle health goth. Sriracha tumblr cardigan, cloud bread succulents tumeric copper mug marfa semiotics woke next level organic roof party +1 try-hard.
          </p>
          <p>
            I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever. Beard man braid migas single-origin coffee forage ramps. Tumeric messenger bag bicycle rights wayfarers, try-hard cronut blue bottle health goth. Sriracha tumblr cardigan, cloud bread succulents tumeric copper mug marfa semiotics woke next level organic roof party +1 try-hard.
          </p>
          <p>
            I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever. Beard man braid migas single-origin coffee forage ramps. Tumeric messenger bag bicycle rights wayfarers, try-hard cronut blue bottle health goth. Sriracha tumblr cardigan, cloud bread succulents tumeric copper mug marfa semiotics woke next level organic roof party +1 try-hard.
          </p>
        </Container>
      </FullscreenModal>
    </>
  )
}

() => {
  const [isOpen, open, close] = useToggle(false);
  return (
    <>
      <Button variant="outline-primary" onClick={open}>Open fullscreen modal</Button>

      <FullscreenModal
        title="My dialog"
        isOpen={isOpen}
        onClose={close}
        footerNode={(
          <ActionRow>
            <p className="x-small text-muted">
              Please note, there are a limited number of fashion axe's.
            </p>
            <ActionRow.Spacer />
            <Button variant="tertiary" onClick={close}>Cancel</Button>
            <Button>Submit</Button>
          </ActionRow>
        )}
      >
        <Container size="md">
          <p>
            I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever. Beard man braid migas single-origin coffee forage ramps. Tumeric messenger bag bicycle rights wayfarers, try-hard cronut blue bottle health goth. Sriracha tumblr cardigan, cloud bread succulents tumeric copper mug marfa semiotics woke next level organic roof party +1 try-hard.
          </p>
          <p>
            I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever. Beard man braid migas single-origin coffee forage ramps. Tumeric messenger bag bicycle rights wayfarers, try-hard cronut blue bottle health goth. Sriracha tumblr cardigan, cloud bread succulents tumeric copper mug marfa semiotics woke next level organic roof party +1 try-hard.
          </p>
          <p>
            I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever. Beard man braid migas single-origin coffee forage ramps. Tumeric messenger bag bicycle rights wayfarers, try-hard cronut blue bottle health goth. Sriracha tumblr cardigan, cloud bread succulents tumeric copper mug marfa semiotics woke next level organic roof party +1 try-hard.
          </p>
        </Container>
      </FullscreenModal>
    </>
  )
}

Theme Variables (SCSS)#

$modal-inner-padding:                1.5rem !default;
$modal-inner-padding-bottom:         .7rem !default;
$modal-footer-margin-between:        .5rem !default;
$modal-dialog-margin:                1.5rem !default;
$modal-dialog-margin-y-sm-up:        1.75rem !default;
$modal-title-line-height:            $line-height-base !default;
$modal-content-color:                null !default;
$modal-content-bg:                   $white !default;
$modal-content-border-color:         rgba($black, .2) !default;
$modal-content-border-width:         0 !default;
$modal-content-border-radius:        $border-radius-lg !default;
$modal-content-inner-border-radius:  subtract($modal-content-border-radius, $modal-content-border-width) !default;
$modal-content-box-shadow-xs:        0 .25rem .5rem rgba($black, .5) !default;
$modal-content-box-shadow-sm-up:     0 10px 20px rgba($black, .15), 0 8px 20px rgba($black, .15) !default;
$modal-backdrop-bg:                  $black !default;
$modal-backdrop-opacity:             .5 !default;
$modal-header-border-color:          $border-color !default;
$modal-footer-border-color:          $modal-header-border-color !default;
$modal-header-border-width:          $modal-content-border-width !default;
$modal-footer-border-width:          $modal-header-border-width !default;
$modal-header-padding-y:             1rem !default;
$modal-header-padding-x:             1.5rem !default;
$modal-close-container-top:          .625rem !default;
$modal-header-padding:               $modal-header-padding-y $modal-header-padding-x !default;
$modal-footer-padding-y:             1rem !default;
$modal-footer-padding-x:             1.5rem !default;
$modal-footer-padding:               $modal-footer-padding-y $modal-footer-padding-x !default;
$modal-xl:                           1140px !default;
$modal-lg:                           800px !default;
$modal-md:                           500px !default;
$modal-sm:                           400px !default;
$modal-fade-transform:               translate(0, -50px) !default;
$modal-show-transform:               none !default;
$modal-transition:                   transform .3s ease-out !default;
$modal-scale-transform:              scale(1.02) !default;

Props API#

FullscreenModal Props API

children node Required
Specifies contents of the component.
className string
Specifies class name to append to the base element.
title string Required
Specifies the aria-label of the dialog.
onClose func Required
Specifies a callback to close the modal dialog.
isOpen bool
Specifies whether the modal is open.
Defaultfalse
hasCloseButton bool
Specifies whether the model hase close 'x' icon button in the top right of the dialog box.
Defaulttrue
size enum'sm' | 'md' | 'lg' | 'xl' | 'fullscreen'
Specifies size of the dialog box.
Default'fullscreen'
variant enum'default' | 'warning' | 'danger' | 'success' | 'dark'
Specifies visual style of the dialog box.
Default'dark'
closeLabel string
The label supplied to the close icon button if one is rendered
Default'Close'
isFullscreenScroll bool
Determines where a scrollbar should appear if a modal is too large for the viewport. When false, the ModalDialog.Body receives a scrollbar, when true the browser window itself receives the scrollbar.
Defaultfalse
footerNode node
Specifies footer for the dialog box.
Defaultnull
beforeBodyNode node
Specifies content that should be rendered before modal's body.
Defaultnull
afterBodyNode node
Specifies content that should be rendered after modal's body.
Defaultnull
modalBodyClassName string
Specifies class name for modal's body component.
Default''

ModalDialog Props API

children node Required
Specifies the content of the dialog
title string Required
The aria-label of the dialog
onClose func Required
A callback to close the modal dialog
isOpen bool
Is the modal dialog open or closed
Defaultfalse
hasCloseButton bool
The close 'x' icon button in the top right of the dialog box
Defaulttrue
size enum'sm' | 'md' | 'lg' | 'xl' | 'fullscreen'
Sizes determine the maximum width of the dialog box
Default'md'
variant enum'default' | 'warning' | 'danger' | 'success' | 'dark'
The visual style of the dialog box
Default'default'
closeLabel string
The label supplied to the close icon button if one is rendered
Default'Close'
className string
Specifies class name to append to the base element
isFullscreenScroll bool
Determines where a scrollbar should appear if a modal is too large for the viewport. When false, the ModalDialog. Body receives a scrollbar, when true the browser window itself receives the scrollbar.
Defaultfalse
isFullscreenOnMobile bool
To show full screen view on mobile screens
Defaultfalse
isBlocking bool
Prevent clicking on the backdrop or pressing Esc to close the modal
Defaultfalse
zIndex number
Specifies the z-index of the modal
isOverflowVisible bool
Specifies whether overflow is visible in the modal
Defaulttrue

Usage Insights#

FullscreenModal

Project Name	Paragon Version	Instance Count
frontend-app-admin-portal	21.13.1	5
frontend-app-course-authoring	22.8.1	3
frontend-app-ora-grading	21.11.3	1

ModalDialog

Project Name	Paragon Version	Instance Count
frontend-app-account	22.9.0	4
frontend-app-admin-portal	21.13.1	25
frontend-app-authn	22.10.0	2
frontend-app-communications	22.7.0	1
frontend-app-course-authoring	22.8.1	19
ora_settings	22.8.1	1
proctoring	22.8.1	1
xpert_unit_summary	22.8.1	1
frontend-app-discussions	22.7.0	2
frontend-app-enterprise-public-catalog	21.13.1	2
frontend-app-gradebook	22.8.1	1
frontend-app-learner-dashboard	22.9.0	5
frontend-app-learner-portal-enterprise	21.13.1	3
frontend-app-learner-record	22.10.0	1
frontend-app-learning	22.8.1	4
frontend-app-library-authoring	21.11.3	3
frontend-app-payment	22.9.0	2
frontend-app-publisher	21.13.1	1
frontend-app-support-tools	21.13.1	16
frontend-lib-special-exams	22.7.0	1
prospectus	20.46.2	3

Edit this page Leave feedback

Paragon Design System

Theme

FullscreenModal

Basic Usage

Theme Variables (SCSS)#

Props API#

Usage Insights#

FullscreenModal

ModalDialog

All components (A-Z)

Theme

FullscreenModal

Basic Usage#

Theme Variables (SCSS)#

Props API#

Usage Insights#

FullscreenModal

ModalDialog

All components (A-Z)

Basic Usage