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.

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.

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.

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.

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

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

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

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

This example shows how to use setAppElement to properly hide your application from screenreaders and other assistive technologies while the modal is open. You'll notice in this example that the aria-hidden attribute is applied to the #main div rather than the document body.

This is due to the fact that the react-modal doesn't store the isOpen on its state (only for the internal portal (see ModalPortal.js). disable 'close on overlay click', codepen by claydiffrient. enable 'close on overlay click', codepen by sbgriffi