ModalPopup
A generic component for creating accessible modal popup objects.
Note that ModalPopup
expects DOM node, not ref, in order to be able to update when the node changes.
A proper way to implement this is to use callback refs with useState
hook as in the example below.
Basic Usage
Any Paragon component or export may be added to the code example.
With arrow
The arrow modifier positions an inner element of the modal popup so it appears centered relative to the reference.
Any Paragon component or export may be added to the code example.
Extra props supplied to ModalPopup are passed through to an underlying PopperElement component.
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 contents of the modal
- onClose
func
RequiredA callback function for when the modal is dismissed
- isOpen
bool
RequiredIs the modal dialog open or closed
- isBlocking
bool
DefaultfalsePrevent clicking on the backdrop or pressing Esc to close the modal
- withPortal
bool
DefaultfalseInsert modal into a different location in the DOM
- positionRef
func
|shape
{current:}shape
{},DefaultnullSpecifies an element near which the modal should be displayed
- placement
PopperElement.propTypes.placement
Default'bottom-start'Specifies position according to the element that the
positionRef
prop points to - hasArrow
bool
DefaultfalseCaret to the modal popup pointing to the target
- as
elementType
DefaultButtonSpecifies the base element
- children
node
DefaultnullSpecifies the content of the button
- className
string
Specifies class name to append to the base element
- onClick
func
Specifies the callback function when the close button is clicked
Usage Insights#
ModalCloseButton
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-account | 22.10.0 | 1 | |
frontend-app-learner-dashboard | 22.9.0 | 1 |
ModalPopup
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-account | 22.10.0 | 1 | |
frontend-app-admin-portal | 21.13.1 | 1 | |
frontend-app-course-authoring | 22.8.1 | 4 | |
frontend-app-discussions | 22.7.0 | 2 | |
frontend-app-learner-dashboard | 22.9.0 | 1 | |
frontend-app-learning | 22.10.0 | 1 | |
frontend-component-header-edx | 21.13.1 | 1 | |
frontend-component-header | 22.10.0 | 1 |