react-modal. Accessible modal dialog component for React.JS. We maintain that accessibility is a key component of any modern web application. As such, we have created this modal in such a way that it fulfills the accessibility requirements of the modern web.

Sometimes it may be preferable to use CSS classes rather than inline styles. react-modal can be configured to use CSS classes to style the modal content and overlay, as well as the document body and the portal within which the modal is mounted.

react-modal aims to be fully accessible, using the WAI-ARIA guidelines to support users of assistive technologies. This page describes some of react-modal's accessibility-oriented features, along with their configuration options.

This example shows the minimal needed to get React Modal to work. Minimal example

Run local. The following sub-sections contain several examples of basic usage, hosted on CodePen. The examples directory in the project root also contains some examples which you can run locally. To build and run those examples using a local development server, run either

Styles passed into the Modal via the style prop are merged with the defaults. The default styles are defined in the Modal.defaultStyles object and are shown below.

When using React Test Utils with this library, here are some things to keep in mind: You need to set isOpen={true} on the modal component for it to render its children. You need to use the .portal property, as in ReactDOM.findDOMNode(renderedModal.portal) or TestUtils.scryRenderedDOMComponentsWithClass(Modal.portal, 'my-modal-class') to acquire ...

If you'll be using several modals and want to adjust styling for all of them in one location you can by modifying Modal.defaultStyles. Global overrides example

Using CSS classes, it is possible to implement transitions for when the modal is opened or closed. By placing the following CSS somewhere in your project's styles, you can make the modal content fade in when it is opened and fade out when it is closed:

If you prefer to use CSS to handle styling the modal you can. One thing to note is that by using the className property you will override all default styles. CSS classes example