react-modalのzIndex設定により透過効果を実現

React Modalで作ったポップアップ画面の透過効果

　Modalを表示する場合、デフォルトは元画面が暗くなり、透過的な効果で薄く見えるようになる。Modal画面を閉じると、元の状態に回復する。
　ヘッダ、コンテンツ部のサブヘッダなどが存在するなど複雑の画面構成の場合、Modalを表示しても、ヘッダ部が暗くならないケースがある。
　その理由はz-indexの値がヘッダのz-indexより小さいからです。Modalのインラインスタイルでoverlay部にzIndexを大きい値を設定すれば解決になる。

<Modal
  isOpen={true}
  contentLabel="hello react model"
  shouldCloseOnOverlayClick={false}
  style={{
    overlay: {
      zIndex: 100
    },
    content: {
      border: 'none'
    }
  }}
>
  <p>Hello, React Modal</p>
</Modal>

ModalのDOM構成

Modalコンポーネントで生成されたDOMが次のような構成である。

• modelルートdiv
• overlayのdiv
  - contentのdiv