Ботинок ReactJS модальный сверху

Question

У меня есть модал с несколькими таблицами, нажатие на строку откроет другой модал, на котором я надеялся быть сверху, но "модальное тело", кажется, отображает некоторую информацию о первом модале!

Любая помощь будет отличной!Спасибо!

Я могу прокручивать таблицы из модального режима ниже

Modal.js

import React from 'react';
import PropTypes from 'prop-types';

class Modal extends React.Component {
  render() {
    // Render nothing if the "show" prop is false
    if(!this.props.show) {
      return null;
    }

      // The gray background
    const backdropStyle = {
      position: 'fixed',
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
      backgroundColor: 'rgba(0,0,0,0.3)',
      padding: 50
    };

    // The modal "window"
    const modalStyle = {
      backgroundColor: '#fff',
      borderRadius: 5,
      maxWidth: 1500,
      minHeight: 800,
      margin: '0 auto',
      padding: 10
    };    

    return (

    <div className="backdrop" style={backdropStyle}>
     <div className="modal-content" style={modalStyle}>

        <div className="modal-content">
          <div className="modal-header">
            <h4 className="modal-title">{this.props.titulo}</h4>
            <button onClick={this.props.onClose} type="button" className="close">&times;</button>
          </div>
          <div className="modal-body">
            {this.props.children}
          </div>
          <div className="modal-footer">
            <button type="button" className="btn btn-default" onClick={this.props.onClose}>Close</button>
          </div>
        </div>
     </div>
    </div>

    );
  }
}

Modal.propTypes = {
  onClose: PropTypes.func.isRequired,
  show: PropTypes.bool,
  children: PropTypes.node
};

export default Modal;

Answer 1

Как я это исправил

Я сделал еще один модал ( Modal2.js ) .z3 для верхнего модала и .z1 для нижнего!

.z1 {
  z-index: 1000;
}

.z3 {
  z-index: 1200;
}