Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

modal

v1.0.0arrow_drop_down
v1.0.0
STATUS
Passing
DOWNLOADS
240
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
7 months ago
SIZE
14 KB
Render a large or small modal.
1 contributor
Use modal in your project ?
Copied
npm i @bit/react-bootstrap.react-bootstrap.modal
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
revert changes
reload
toggle layout
maximize
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
chevron_left
chevron_right

Render a large or small modal.

vertically center the Dialog in the window

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".

Close the modal when escape key is pressed

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

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

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.

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.

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.

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

When true The modal will show itself.

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

Callback fired before the Modal transitions in

Callback fired as the Modal begins to transition in

Callback fired after the Modal finishes transitioning in

Callback fired right before the Modal transitions out

Callback fired as the Modal begins to transition out

Callback fired after the Modal finishes transitioning out