z-index不适用于在react中创建的模态且模态未显示在顶部

Question

I have created on modal using HTMl and CSS in react but, modal is not working as expected when deployed on environment as I have set z-index of modal to be higher

But there are other component on page who has also z-index and as those component appears before modal component in html page order.

Model doesn't appear on top as expected.

IS there any way in react, so that we can override all existing z-index and modal will work as expected. I am providing CSS code for modal overlay and modal

.modal-overlay{
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: 5;
    background-color: rgba(0,0,0,0.3);
    overflow: scroll;
}
.modal{
    display: flex;
    flex-direction: column;
    flex-basis: auto;
    background-color: #fff;
    max-width: 375px;
    margin: 0px auto;
}

Answer 1

This method uses React Portal. U should have element with id="modal-root" in ur index html file. Every time u call a modal, the modal will come inside modal-root, Hence there will be no problem of z-index as ur rendering the Modal at the topmost div

Create a file Modal.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

const modalRoot = document.getElementById('modal-root');

class Modal extends Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('div');
  }

  componentDidMount() {
    modalRoot.appendChild(this.el);
    console.log('Modal did mount');
  }

  componentWillUnmount() {
    console.log('Modal will unmount');
    modalRoot.removeChild(this.el);
  }
  render() {
    return ReactDOM.createPortal(
      this.props.children,
      this.el,
    );
  }
}

export default Modal;

Create actual modal code

import React from 'react';

const ImageContainer = props => (
  <div className="modal d-block full-screen-popup" tabIndex="-1" role="dialog">
    <div className="modal-dialog" role="document">
      <div className="modal-content">
        <div className="modal-header">
          <h6 className="modal-title text-center bold">Title</h6>
          <button type="button" className="close" onClick={props.onClose}>
            <span className="icon-close" />
          </button>
        </div>
        <div className="modal-body p-0">
          <div className="imageBody text-center">
            <img className="img-fluid" src={props.imgSrc} />
          </div>
        </div>
      </div>
    </div>
  </div>
);

export default ImageContainer;

Its CSS should be

.full-screen-popup {
    background-color: rgba(0,0,0,.62);
}

.d-block {
    display: block!important;
}
.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    outline: 0;
}

Then in any js file, Import the Modal, and pass the actual modal component.

renderImageModal = () => {
    if (this.state.showImageModal) {
      return (
        <Modal>
          <ImageContainer onClose={this.handleImageModalClose} imgSrc={this.state.link} />
        </Modal>);
    }
    return null;
  }

 handleModalOpenClick = () => {

    this.setState({
      showImageModal: true,
    });
  }

handleImageModalClose = () => {
    this.setState({
      showImageModal: false,

    });
  }


    render(){ 
     return(
       <button onclick={this.handleModalOpenClick}>Open Modal</button>
        {this.renderImageModal()})
    }

Answer 2

The best way to create modal using ReactJS is to use Portals .

You can check the docs for portals here in the ReactJS docs or here the particular Modal example on codepen.