z-индекс не работает на модале, созданном в реакции, и модал не появляется сверху - PullRequest
Новая
       85

z-индекс не работает на модале, созданном в реакции, и модал не появляется сверху

0 голосов
/ 24 апреля 2018

Я создал модал, используя 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;
}

Ответы [ 2 ]

0 голосов
/ 24 апреля 2018

Этот метод использует React Portal.У вас должен быть элемент с id = "modal-root" в вашем html файле индекса.Каждый раз, когда вы вызываете модал, модал попадает внутрь модального корня, поэтому не будет проблем с z-index при рендеринге модала сверху 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 импортировать модал и передатьактуальный модальный компонент. 

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()})
    }
0 голосов
/ 24 апреля 2018

Лучший способ создать модал с использованием ReactJS - это использовать Portals.

. Вы можете проверить документы для порталов здесь в документах ReactJS или здесь конкретный Modal пример на codepen.

...