React Responsive Modal
Edit page
ExamplesCentered modalBig modalMultiple modalFocus Trapped modalCustom styling with cssCustom animationCustom close iconCustom containerGetting started

Examples

Centered modal

If you want your modal to be centered in the screen just pass the center prop.

Big modal

When a big modal is open, you can scroll the content of the modal but you will see that the body scroll is locked until you actually close the modal.

Multiple modal

Focus Trapped modal

By default, when the modal open, the first focusable element will be focused. Press Tab to navigate between the focusable elements in the modal. You can notice that when the modal is open, you can't focus the elements outside of it.

Custom styling with css

It's really easy to add your own style to the modal. For example if you add the following css to your app you will get the following result:

/* examples/custom-styling.css */
.customOverlay {
background: rgba(36, 123, 160, 0.7);
}
.customModal {
background: #b2dbbf;
max-width: 500px;
width: 100%;
}

Custom animation

If you want to change the default animation, you can do so by creating your own css animation. For example if you add the following css to your app you will get the following result:

/* examples/custom-animation.css */
@keyframes customEnterAnimation {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes customLeaveAnimation {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}

If you want to apply a custom animation to the modal body you can do like this:

Custom close icon

You can specify a custom close icon (svg, img..).

Custom container

By default, the modal will be rendered at the end of the html body tag. If you want to render the modal in your own container, you can pass a valid Element to the container prop.