react-modalは、react.jsでモーダルを実装できるうすーいモーダルコンポーネントです。
https://github.com/reactjs/react-modal

簡単なサンプル

See the Pen react-modal sample by hiroaki tachibana (@eedamame) on CodePen.

概観

必要十分な機能だけ用意してあって、あとは各々お好きにという印象。

isOpen に渡すstate（ここでは showModal ）のboolean値をtoggleさせて表示の切り替えをする。

その表示切り替えのメソッドも下記部分のように自分で用意する。

  handleOpenModal () {
    this.setState({ showModal: true });
  }

  handleCloseModal () {
    this.setState({ showModal: false });
  }

これをbuttonのonClickなどから呼ぶ。

<button onClick={this.handleOpenModal}>Trigger Modal</button>

オーバーレイ部分をクリックでモーダルを閉じる

これが最初書いた時にうまく動かなくてちょっとハマった。

shouldCloseOnOverlayClick が false なら閉じない。
デフォルト値は true だから特に何も書かなければ、閉じるはず..？
んーなんでかなと思って見てたら、Examplesの一個前に onRequestClose Callback があった。

なるほど、たしかにcloseの時のメソッドは自分で定義してるんだから、勝手に閉じてくれるわけないか。
shouldCloseOnOverlayClick={true} は、closeのリクエストを発行している？だけ。

onRequestClose={this.handleCloseModal}

という感じで、閉じる時のメソッド実行してくださいと書いてあげる必要があった。 サンプルそのまま書けば問題ないんだけど、なぜか該当部分消してしまって時間使ってしまった…

スタイリング

https://reactcommunity.org/react-modal/styles/
こんな感じでデフォルトスタイルが用意されている。

デフォルトで用意されているスタイルを使うのでなければ、別途classをつけて自分で一からスタイリングするのがわかりやすそうかな。

jsx

<ReactModal
  className="Modal"
  overlayClassName="Overlay"
  ...
>

css

.Modal {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  padding: 2em;
  min-width: 20em;
  max-width: 70%;
  color: #f00;
  background-color: #fff;
  border-radius: 1em;
  transform: translate(-50%, -50%);
  outline: transparent;
}
.Overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0,0,0,.4);
}