ModalDialog
A set of components for making all kinds of modal dialogs. Remember to supply
the required title
prop to ModalDialog
in order ensure there is an accessible
label for the dialog element.
Basic Usage
Any Paragon component or export may be added to the code example.
With header content
Any Paragon component or export may be added to the code example.
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#
- children
node
RequiredSpecifies the content of the dialog
- title
string
RequiredThe aria-label of the dialog
- onClose
func
RequiredA callback to close the modal dialog
- isOpen
bool
DefaultfalseIs the modal dialog open or closed
- hasCloseButton
bool
DefaulttrueThe close 'x' icon button in the top right of the dialog box
- size
enum
'sm' | 'md' | 'lg' | 'xl' | 'fullscreen'Default'md'Sizes determine the maximum width of the dialog box
- variant
enum
'default' | 'warning' | 'danger' | 'success' | 'dark'Default'default'The visual style of the dialog box
- closeLabel
string
Default'Close'The label supplied to the close icon button if one is rendered
- className
string
Specifies class name to append to the base element
- isFullscreenScroll
bool
DefaultfalseDetermines 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. - isFullscreenOnMobile
bool
DefaultfalseTo show full screen view on mobile screens
- isBlocking
bool
DefaultfalsePrevent clicking on the backdrop or pressing Esc to close the modal
- zIndex
number
Specifies the z-index of the modal
- isOverflowVisible
bool
DefaulttrueSpecifies whether overflow is visible in the modal
- as
elementType
Default'h2'Specifies the base element
- children
node
RequiredSpecifies the contents of the header
- className
string
Specifies class name to append to the base element
- as
elementType
Default'div'Specifies the base element
- children
node
RequiredSpecifies the contents of the header
- className
string
Specifies class name to append to the base element
- asDefault'div'
elementType
- children
node
Required - className
string
- as
elementType
Default'div'Specifies the base element
- children
node
RequiredSpecifies the contents of the header
- className
string
Specifies class name to append to the base element
Usage Insights#
ModalDialog
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-account | 22.0.0 | 4 | |
frontend-app-admin-portal | 21.13.1 | 22 | |
frontend-app-authn | 22.8.1 | 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.8.1 | 5 | |
frontend-app-learner-portal-enterprise | 21.13.1 | 3 | |
frontend-app-learner-record | 22.8.1 | 1 | |
frontend-app-learning | 22.8.1 | 4 | |
frontend-app-library-authoring | 21.11.3 | 3 | |
frontend-app-payment | 22.8.1 | 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 |
ModalDialogBody
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-account | 22.0.0 | 4 | |
frontend-app-admin-portal | 21.13.1 | 22 | |
frontend-app-authn | 22.8.1 | 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.8.1 | 1 | |
frontend-app-learner-portal-enterprise | 21.13.1 | 3 | |
frontend-app-learner-record | 22.8.1 | 1 | |
frontend-app-learning | 22.8.1 | 2 | |
frontend-app-library-authoring | 21.11.3 | 2 | |
frontend-app-payment | 22.8.1 | 1 | |
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 |
ModalDialogCloseButton
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-account | 22.0.0 | 4 | |
frontend-app-admin-portal | 21.13.1 | 14 | |
frontend-app-authn | 22.8.1 | 1 | |
frontend-app-communications | 22.7.0 | 1 | |
frontend-app-course-authoring | 22.8.1 | 15 | |
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-gradebook | 22.8.1 | 1 | |
frontend-app-learner-record | 22.8.1 | 1 | |
frontend-app-learning | 22.8.1 | 3 | |
frontend-app-library-authoring | 21.11.3 | 2 | |
frontend-app-publisher | 21.13.1 | 1 | |
frontend-app-support-tools | 21.13.1 | 16 | |
prospectus | 20.46.2 | 2 |
ModalDialogFooter
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-account | 22.0.0 | 4 | |
frontend-app-admin-portal | 21.13.1 | 22 | |
frontend-app-authn | 22.8.1 | 2 | |
frontend-app-communications | 22.7.0 | 1 | |
frontend-app-course-authoring | 22.8.1 | 17 | |
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-portal-enterprise | 21.13.1 | 1 | |
frontend-app-learner-record | 22.8.1 | 1 | |
frontend-app-learning | 22.8.1 | 1 | |
frontend-app-library-authoring | 21.11.3 | 2 | |
frontend-app-payment | 22.8.1 | 1 | |
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 | 2 |
ModalDialogHeader
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-account | 22.0.0 | 4 | |
frontend-app-admin-portal | 21.13.1 | 21 | |
frontend-app-authn | 22.8.1 | 2 | |
frontend-app-course-authoring | 22.8.1 | 20 | |
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-learner-dashboard | 22.8.1 | 2 | |
frontend-app-learner-portal-enterprise | 21.13.1 | 1 | |
frontend-app-learner-record | 22.8.1 | 1 | |
frontend-app-learning | 22.8.1 | 1 | |
frontend-app-library-authoring | 21.11.3 | 2 | |
frontend-app-payment | 22.8.1 | 1 | |
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 | 2 |
ModalDialogHero
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-enterprise-public-catalog | 21.13.1 | 2 | |
frontend-app-learner-dashboard | 22.8.1 | 1 | |
frontend-app-learner-portal-enterprise | 21.13.1 | 3 | |
frontend-app-learning | 22.8.1 | 1 |
ModalDialogTitle
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-account | 22.0.0 | 4 | |
frontend-app-admin-portal | 21.13.1 | 21 | |
frontend-app-authn | 22.8.1 | 2 | |
frontend-app-course-authoring | 22.8.1 | 20 | |
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 | 4 | |
frontend-app-learner-portal-enterprise | 21.13.1 | 2 | |
frontend-app-learner-record | 22.8.1 | 1 | |
frontend-app-learning | 22.8.1 | 2 | |
frontend-app-library-authoring | 21.11.3 | 2 | |
frontend-app-payment | 22.8.1 | 1 | |
frontend-app-publisher | 21.13.1 | 1 | |
frontend-app-support-tools | 21.13.1 | 15 | |
frontend-lib-special-exams | 22.7.0 | 1 | |
prospectus | 20.46.2 | 2 |