Modals

Open and close the Modal with a slide and fade animation.

When true The modal will automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. Generally this should never be set to false as it makes the Modal less accessible to assistive technologies, like screen-readers.

Include a backdrop component. Specify 'static' for a backdrop that doesn't trigger an "onHide" when clicked.

Add an optional extra class name to .modal-backdrop It could end up looking like class="modal-backdrop foo-modal-backdrop in".

vertically center the Dialog in the window

Add an optional extra class name to .modal-content

A Component type that provides the modal content Markup. This is a useful prop when you want to use your own styles and markup to create a custom modal component.

A css class to apply to the Modal dialog DOM node.

When true The modal will prevent focus from leaving the Modal while open. Consider leaving the default value here, as it is necessary to make the Modal work well with assistive technologies, such as screen readers.

Close the modal when escape key is pressed

A ModalManager instance used to track and manage the state of open Modals. Useful when customizing how modals interact within a container

Callback fired before the Modal transitions in

Callback fired after the Modal finishes transitioning in

Callback fired as the Modal begins to transition in

A callback fired when the escape key, if specified in keyboard, is pressed.

Callback fired right before the Modal transitions out

Callback fired after the Modal finishes transitioning out

Callback fired as the Modal begins to transition out

A callback fired when the header closeButton or non-static backdrop is clicked. Required if either are specified.

A callback fired when the Modal is opening.

When true The modal will restore focus to previously focused element once modal is hidden

Options passed to focus function when restoreFocus is set to true

Allows scrolling the <Modal.Body> instead of the entire Modal when overflowing.

When true The modal will show itself.

Render a large, extra large or small modal. When not provided, the modal is rendered with medium (default) size.

Specify whether the Component should be vertically centered

Allows scrolling the <Modal.Body> instead of the entire Modal when overflowing.

Render a large, extra large or small modal.

Specify whether the Component should contain a close button

Provides an accessible label for the close button. It is used for Assistive Technology when the label text is not readable.

A Callback fired when the close button is clicked. If used directly inside a Modal component, the onHide will automatically be propagated up to the parent Modal onHide.