React-modal hides behind elements

Question

I am trying to make use of react-modal for the first time. When I click on the sign-in button, the react-modal component is invoke but seems to be hiding behind the cover page which is a video landing page.

The React devtool displays the appropriate states before the sign-in button is clicked before the sign-in button is clicked

When the sign-in button is now clicked, the react devtool now displays that the ModalPortal component is rendered showing the appropriate states when the sign-in button is clicked

SignInModal.scss

.ReactModalPortal>div {
    opacity: 0;
}

.ReactModalPortal .ReactModal__Overlay {
    align-items: center;
    display: flex;
    justify-content: center;
    transition: opacity 200ms ease-in-out;
}

.ReactModalPortal .ReactModal__Overlay--after-open {
    opacity: 1;
}

.ReactModalPortal .ReactModal__Overlay--before-close {
    opacity: 0;
}

.modal {
    position: relative;
    background: #464b5e;
    color: white;
    max-width: 90rem;
    outline: none;
    padding: 3.2rem;
    text-align: center;
}

.modal__title {
    margin: 0 0 1.6rem 0;
}

.modal__body {
    font-size: 2rem;
    font-weight: 300;
    margin: 0 0 3.2rem 0;
    word-break: break-all;
}

CoverPage.js Component

import Header from './Header';
import HeaderVideo from './HeaderVideo';
import SignInModal from './SignInModal';

import React, { Component } from 'react';

class CoverPage extends Component {
  state = {
    modalIsOpen: false
  };

  onOpenModal = () => {
    this.setState(() => ({
      modalIsOpen: true
    }));
  };

  onCloseModal = () => {
    this.setState(() => ({
      modalIsOpen: false
    }));
  };
  render() {
    return (
      <div>
        <Header />
        <HeaderVideo onOpenModal={this.onOpenModal} />
        <SignInModal
          modalIsOpen={this.state.modalIsOpen}
          onOpenModal={this.onOpenModal}
          onCloseModal={this.onCloseModal}
        />
      </div>
    );
  }
}

export default CoverPage;

HeaderVideo.js Component

import React from 'react';
import Signup from './Signup';
import CoverInfo from './CoverInfo';

const HeaderVideo = props => {
  return (
    <div className="video-container">
      <video preload="true" autoPlay loop volume="0" postoer="/images/1.jpg">
        <source src="images/vine.mp4" type="video/mp4" />
        <source src="images/vine1.webm" type="video/webm" />
      </video>
      <div className="video-content">
        <div className="container content">
          <div className="row">
            <div className="col-md-9">
              <CoverInfo onOpenModal={props.onOpenModal} />
            </div>
            <div className="col-md-3">
              <Signup />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default HeaderVideo;

CoverInfo.js Component

import React from 'react';

const CoverInfo = props => {
  return (
    <div className="info">
      <div>
        <h1>Welcome to EventCity!</h1>
      </div>
      <div>
        <p>
          At EventCity! we pride ourselves on the unrivalled personal {`event`} services,we provide
          to our clientele. We guide you from the stressful decision making {`process`},ensuring you
          are comfortable,whether it is a wedding, corporate {`function `}or even a kiddies party,we
          create a buzz around you, taking you to the next level.
        </p>
      </div>
      <div>
        <h3>Innovation, {`Performance`} and Delivery</h3>
      </div>
      <button type="button" className="btn btn-success btn-lg" onClick={props.onOpenModal}>
        Sign In here
      </button>
    </div>
  );
};

export default CoverInfo;

video-cover.scss

video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1;
}

.video-content {
    z-index: 2;
    position: absolute;
    background: rgba(0, 0, 0, 0.6);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.content {
    padding-top: 120px;
}

Answer 1

You need to set the z-index property on the Modal's overlay, which normally has a z-index of 0. The CSS class is .ReactModal__Overlay

Here is the pure-React way of doing it:

const customStyles = {
  content : {
    ...
  },
  overlay: {zIndex: 1000}
};

<Modal style={customStyles}>
  ...
</Modal>

Answer 2

.modal {
    position: fixed;
    z-index:9999;
    top :0;
    left:0;
    right:0;
    bottom:0;
    background: #464b5e;
    color: white;
    outline: none;
    padding: 3.2rem;
    text-align: center;
}

Answer 3

Example of react-modal inline styles Set the styles in the react-modal inline styles. The z-index to 100 but make just like below

style={{
  overlay: {
  zIndex: 100,
  backgroundColor: 'rgba(70, 70, 70, 0.5)',
},