css - 顶部的 ReactJS Bootstrap 模态

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

我是如何解决的

我制作了另一个 Modal (Modal2.js) .z3 用于顶部模态，.z1 用于底部模态!

.z1 {
  z-index: 1000;
}

.z3 {
  z-index: 1200;
}