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

Show editable code example

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

() => {
  const [isOpen, open, close] = useToggle(false);
  const [target, setTarget] = React.useState(null);

  return (
    <>
      <div className="d-flex">
        <Button
          ref={setTarget}
          variant="outline-primary"
          onClick={open}>
          Open modal popup
        </Button>
      </div>
      <ModalPopup
        positionRef={target}
        isOpen={isOpen}
        onClose={close}>
        <div
          className="bg-white p-3 rounded shadow"
          style={{textAlign: 'start'}}>
          <p>This could be a menu or tray.</p>

          <Button variant="primary" className="mie-2">Action</Button>
          <ModalCloseButton variant="outline-primary">Close</ModalCloseButton>
        </div>
      </ModalPopup>
    </>
  )
}

() => {
  const [isOpen, open, close] = useToggle(false);
  const [target, setTarget] = React.useState(null);

  return (
    <>
      <div className="d-flex">
        <Button
          ref={setTarget}
          variant="outline-primary"
          onClick={open}>
          Open modal popup
        </Button>
      </div>
      <ModalPopup
        positionRef={target}
        isOpen={isOpen}
        onClose={close}>
        <div
          className="bg-white p-3 rounded shadow"
          style={{textAlign: 'start'}}>
          <p>This could be a menu or tray.</p>

          <Button variant="primary" className="mie-2">Action</Button>
          <ModalCloseButton variant="outline-primary">Close</ModalCloseButton>
        </div>
      </ModalPopup>
    </>
  )
}

With arrow

The arrow modifier positions an inner element of the modal popup so it appears centered relative to the reference.

Show editable code example

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

() => {
  const [isOpen, open, close] = useToggle(false);
  const [target, setTarget] = React.useState(null);

  return (
    <>
      <div className="d-flex">
        <Button
          ref={setTarget}
          variant="outline-primary"
          onClick={open}>
          Open modal popup
        </Button>
      </div>
      <ModalPopup
        hasArrow
        placement="right"
        positionRef={target}
        isOpen={isOpen}
        onClose={close}>
        <div
          className="bg-white p-3 rounded shadow border"
          style={{textAlign: 'start'}}>
          <p>This could be a menu or tray.</p>

          <Button variant="primary" className="mie-2">Action</Button>
          <ModalCloseButton variant="outline-primary">Close</ModalCloseButton>
        </div>
      </ModalPopup>
    </>
  )
}

() => {
  const [isOpen, open, close] = useToggle(false);
  const [target, setTarget] = React.useState(null);

  return (
    <>
      <div className="d-flex">
        <Button
          ref={setTarget}
          variant="outline-primary"
          onClick={open}>
          Open modal popup
        </Button>
      </div>
      <ModalPopup
        hasArrow
        placement="right"
        positionRef={target}
        isOpen={isOpen}
        onClose={close}>
        <div
          className="bg-white p-3 rounded shadow border"
          style={{textAlign: 'start'}}>
          <p>This could be a menu or tray.</p>

          <Button variant="primary" className="mie-2">Action</Button>
          <ModalCloseButton variant="outline-primary">Close</ModalCloseButton>
        </div>
      </ModalPopup>
    </>
  )
}

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#

ModalPopup Props API

children node Required
Specifies the contents of the modal
onClose func Required
A callback function for when the modal is dismissed
isOpen bool Required
Is the modal dialog open or closed
isBlocking bool
Prevent clicking on the backdrop or pressing Esc to close the modal
Defaultfalse
withPortal bool
Insert modal into a different location in the DOM
Defaultfalse
positionRef func | shape {
current: shape {},
}
Specifies an element near which the modal should be displayed
Defaultnull
placement PopperElement.propTypes.placement
Specifies position according to the element that the positionRef prop points to
Default'bottom-start'
hasArrow bool
Caret to the modal popup pointing to the target
Defaultfalse

ModalCloseButton Props API

as elementType
Specifies the base element
DefaultButton
children node
Specifies the content of the button
Defaultnull
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.9.0	1
	frontend-app-learner-dashboard	22.9.0	1

ModalPopup

Project Name	Paragon Version	Instance Count
frontend-app-account	22.9.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.8.1	1
frontend-component-header-edx	21.13.1	1
frontend-component-header	22.10.0	1

Edit this page Leave feedback

Paragon Design System

Theme

ModalPopup

Basic Usage

With arrow

Theme Variables (SCSS)#

Props API#

Usage Insights#

ModalCloseButton

ModalPopup

All components (A-Z)

Theme

ModalPopup

Basic Usage#

With arrow#

Theme Variables (SCSS)#

Props API#

Usage Insights#

ModalCloseButton

ModalPopup

All components (A-Z)

Basic Usage

With arrow