Css 在React中实现模态的正确方法

我想有一个模式，将弹出一个表行时，点击。当我单击表格组件中的一行时，模态正在打开。然而，我并没有得到css想要的结果。我希望它在单击一行时与页面上的所有内容重叠。现在它显示在页面顶部，我看不到其中的内容

//Modal.js

import React from "react";
import Table from "react-bootstrap/Table";

 export default function Modal() {
   return (
     <div className="modalContainer">
     <Table responsive="true" size="sm" striped bordered hover>
      <thead>
        <tr>
         <th>Own Product</th>
         <th>Competitors Products</th>
        </tr>
      </thead>
     <p>Brand</p>
     <p>Category</p>
     <p>In Stock</p>
     <p>Name</p>
     <p>Price</p>
     <p>Product Code</p>
     <p>Product Link</p>
   </Table>
 </div>
 );
}


//Code from Table.js

render() {
  let { isLoaded, products } = this.state; //instead of typing 
  this.state all the time

  if (!isLoaded) {
    return <Loading />;
  } else {
    return (
      <div className="tableContainer">
      {this.props.rows}

      <Table responsive="true" size="sm" striped bordered hover>
        <thead>
          <tr>
            <th>Product ID</th>
            <th>Product Name</th>
            <th>Match ID</th>
            <th>Match Score</th>
            <th>Match Name</th>
            <th>Match Price</th>
            <th>Match State</th>
          </tr>
        </thead>

        <tbody>
          {products.map(product => (
            //use filter instead to show only the matched ones
            <tr key={product.id} onClick={() => this.toggleModal()}>
              <td>{product.id}</td>
              <td>{product.name}</td>
              <td>{product.matches[0].id}</td>
              <td>{Math.round(product.matches[0].score)}</td>
              <td>{product.matches[0].name}</td>
              <td>{product.matches[0].price}</td>
              <td>{product.matches[0].matchLabel}</td>
            </tr>
          ))}
          {this.state.modalOpen ? <Modal /> : null}
        </tbody>
      </Table>
    </div>
   );
  }
 }

 //CSS

.tableContainer {
 position: relative;
 width: 100%;
 height: 100%;
}

.modalContainer {
  margin: -30% auto;
  position: absolute;
  width: 100%;
  height: 100%;
  justify-content: center;
  border: 1px solid black;
  z-index: 1;
  left: 0;
  top: 0;
  overflow: auto;
  background-color: rgba(219, 239, 250);
}

//Modal.js
从“React”导入React；
从“反应引导/表格”导入表格；
导出默认函数Modal（）{
返回(
自有产品
竞争对手产品
烙印

类别

库存

名字

价格

产品代码

产品链接

);
}
//来自Table.js的代码
render（）{
让{isLoaded，products}=this.state；//而不是键入
这是我一直在说的
如果（！已加载）{
返回；
}否则{
返回(
{this.props.rows}
产品ID
品名
匹配ID
比赛分数
匹配名称
匹配价格
匹配状态
{products.map（product=>(
//改为使用过滤器仅显示匹配的
this.toggleModal（）}>
{product.id}
{product.name}
{product.matches[0].id}
{Math.round（product.matches[0].score）}
{product.matches[0].name}
{product.matches[0]。price}
{product.matches[0].matchLabel}
))}
{this.state.modalOpen？：null}
);
}
}
//CSS
.餐具柜{
位置：相对位置；
宽度：100%；
身高：100%；
}
.modalContainer{
利润率：-30%自动；
位置：绝对位置；
宽度：100%；
身高：100%；
证明内容：中心；
边框：1px纯黑；
z指数：1；
左：0；
排名：0；
溢出：自动；
背景色：rgba（219239250）；
}

问题在于您的

表格容器是
位置：相对的
，它为其子项重新设置了定位上下文。因此，您的
绝对是相对于
表格容器而不是浏览器窗口定位的

您可以将您的css更改为，使您的模式为，例如，
位置：固定
，或者将您的模式移出
表格容器
，如下所示：

 return (
      <>
       {this.state.modalOpen ? <Modal /> : null}
       <div className="tableContainer">
          {this.props.rows}

          <Table responsive="true" size="sm" striped bordered hover>

           //....//

          </Table>
          </div>
      </>

返回(
{this.state.modalOpen？：null}
{this.props.rows}
//....//
模式的状态

state = {
      axiosStatus: {
                    status: '',
                    title: '',
                    details: '',
                },
                modal: false,
          }

  <Modal show={this.state.modal} modalClosed={this.modalHandler}>
                        <ModalContent
                            status = {this.state.axiosStatus.status}
                            title = {this.state.axiosStatus.title}
                            details = {this.state.axiosStatus.details}
                        />
                    </Modal>

模态处理程序

modalHandler = ()=> {
    this.setState({modal: !this.state.modal});
};

模态内容处理程序

  axiosStatusHandler = (status, title, details)=>{
        let oldState = this.state.axiosStatus;
        oldState.status = status;
        oldState.title = title;
        oldState.details = details;
        this.setState({axiosStatus: oldState});
    };

modal的Jsx

state = {
      axiosStatus: {
                    status: '',
                    title: '',
                    details: '',
                },
                modal: false,
          }

  <Modal show={this.state.modal} modalClosed={this.modalHandler}>
                        <ModalContent
                            status = {this.state.axiosStatus.status}
                            title = {this.state.axiosStatus.title}
                            details = {this.state.axiosStatus.details}
                        />
                    </Modal>

ModalContent组件

import React from 'react';

import './Modal.css';
import Aux from '../../../hoc/Auxi';
import Backdrop from '../Backdrop/Backdrop';

const Modal = ( props ) => (
    <Aux>
        <Backdrop show={props.show} clicked={props.modalClosed} />
        <div
            className={"Modal"}
            style={{
                transform: props.show ? 'translateY(0)' : 'translateY(-100vh)',
                opacity: props.show ? '1' : '0'
            }}>
            {props.children}
        </div>
    </Aux>
);

export default Modal;

import React from 'react';

import './Backdrop.css';

const backdrop = (props) => (
    props.show ? <div className={"Backdrop"} onClick={props.clicked}></div> : null
);

export default backdrop;

import React from 'react';

const ModalContent = (props)=>{

    return (
        <div style={{textAlign: 'center'}}>
            {/* <h3 style={{color: '#FF0000'}}>Failed</h3>*/}
            <b><h2 style={{color: '#FF0000'}}>{props.title}</h2></b>
            <h2 style={{color: '#FF0000'}}>{props.details}</h2>
        </div>
    )


};

export default ModalContent;

从“React”导入React；
const ModalContent=（道具）=>{
返回(
{/*失败*/}
{props.title}
{props.details}
)
};
导出默认ModalContent；