0

我已经在反应中使用 HTMl 和 CSS 创建了模态，但是，当我将模态的 z-index 设置为更高时，当部署在环境中时，模态无法按预期工作

但是页面上还有其他组件也具有 z-index 并且这些组件出现在 html 页面顺序中的模态组件之前。

模型未按预期显示在顶部。

是否有任何反应方式，以便我们可以覆盖所有现有的 z-index 并且模态将按预期工作。我正在为模态叠加和模态提供 CSS 代码

.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;
}
4

2 回答 2

1

此方法使用 React Portal。你的索引 html 文件中应该有 id="modal-root" 的元素。每次调用modal时，modal都会进入modal-root里面，因此不会有z-index的问题，因为你将Modal渲染在最顶层的div

创建一个文件 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;

创建实际的模态代码

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;

它的 CSS 应该是

.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;
}

然后在任意一个 js 文件中，导入 Modal，并传递实际的 modal 组件。

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()})
    }
于 2018-04-24T13:47:50.117 回答
-2

创建模态的最佳方法ReactJS是使用Portals.

您可以在 ReactJS 文档中或此处查看codepen 上的特定Modal示例中的门户文档。

于 2018-04-24T11:15:07.057 回答