реактивная модальная динамическая калибровка

Question

Я использую реагирующий модал , что довольно здорово.Можно ли его динамически изменить (возможно, с помощью тега css media).Например,

1. Для большого экрана модал занимает только маленькую часть экрана (скажем, максимальная ширина 200 пикселей;
2. Для среднего экрана модал занимает большую частьэкран (допустим, 80% ширины и высоты экрана
3. Для мобильных устройств он занимает 100% ширины и высоты.

Answer 1

class Modal extends React.Component {

  state = {
    showModal: false
  };

  handleOpenModal = () => {
    this.setState({ showModal: true });
  };

  handleCloseModal = () => {
    this.setState({ showModal: false });
  };
  
  componentDidMount() {
    ReactModal.setAppElement('#root');
  }

  render() {
    return (
      <div>
        <button onClick={this.handleOpenModal}>Trigger Modal</button>
        <ReactModal
          isOpen={this.state.showModal}
          className="Modal"
          overlayClassName="Overlay"
        >
          <p>Here goes your content!</p>
          <button onClick={this.handleCloseModal}>Close Modal</button>
        </ReactModal>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Modal />, rootElement);

.Modal {
  height: 100%;
  width: 100%;

  background-color: #ffffff;
  overflow: auto;
}

.Overlay {
  position: fixed;

  top: 0;
  bottom: 0;
  right: 0;
  left: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  background-color: rgba(0, 0, 0, 0.4);
}

@media (min-width: 768px) and (max-width: 1279px) {
  .Modal {
    width: 80%;
    height: 80%;
  }
}

@media (min-width: 1280px) {
  .Modal {
    height: auto;
    width: auto;

    max-width: 500px;
    max-height: 80%;
  }
}

<div id="root" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-modal/3.6.1/react-modal.min.js"></script>

Answer 2

Лучше не использовать calc из-за поддержки IE.

..ReactModal__Overlay {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.7);
    z-index: 999;
}

// this is better to use transform for center the modal and width 
.ReactModal__Content {
    position: absolute; // if it's inside your ReactModal__Overlay if not use Fixed and a higher z-index.
    width: 100%;
    height: 100%;
    left: 50%;
    top: 50%;
    overflow: auto;
    background-color: #fff;
    -webkit-transform: translate(-50,-50%);
    transform: translate(-50,-50%);
}

@media screen and (min-width: 992px) { // desktop
    .modal.modal-content {
        max-width: 200px;
        max-height: 80%;
    }
}

@media screen and (min-width: 426px) and (max-width: 991) { // tablet size
    .modal.modal-content {
        max-width: 80%;
        max-height: 80%;
    }
}

@media screen and (max-width: 425px) { // mobile size
    .modal.modal-content {
        max-width: 100%;
        max-height: 100%;
    }
}

Answer 3

Посмотрите на этот код, который готовит для вас.

ReactModal.setAppElement('#main');

class ExampleApp extends React.Component {
  constructor () {
    super();
    this.state = {
      showModal: false
    };

    this.handleOpenModal = this.handleOpenModal.bind(this);
    this.handleCloseModal = this.handleCloseModal.bind(this);
  }

  handleOpenModal () {
    this.setState({ showModal: true });
  }

  handleCloseModal () {
    this.setState({ showModal: false });
  }

  render () {
    return (
      <div>
        <button onClick={this.handleOpenModal}>Trigger Modal</button>
        <ReactModal 
           isOpen={this.state.showModal}
           contentLabel="onRequestClose Example"
           onRequestClose={this.handleCloseModal}
           className="Modal"
           overlayClassName="Overlay"
        >
          <p>Modal text!</p>
          <button onClick={this.handleCloseModal}>Close Modal</button>
        </ReactModal>
      </div>
    );
  }
}

const props = {};

ReactDOM.render(<ExampleApp {...props} />, document.getElementById('main'))

Оформить заказ в отзывчивом виде:

https://codepen.io/ene_salinas/full/yRGMpG/

Оформить полный код:

https://codepen.io/ene_salinas/pen/yRGMpG

Yellow color = large screen
Green color = medium screen
Gray color = Mobile

Не забудьте эту мета:

"<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">"

Удачного кодирования.

Answer 4

Я также использую библиотеку в моем проекте, в котором я разработал следующие правила стилевого оформления для модального стиля:

.ReactModal__Overlay {
    z-index: 99;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.75);
}

.ReactModal__Content {
    position: absolute;
    left: 2.5rem;
    right: 2.5rem;
    top: 2.5rem;
    bottom: 2.5rem;
    background-color: #fff;
    box-shadow: 0 0 10px 0 rgba(0,0,97,0.5);
    overflow: auto;
    border-radius: 4px;
    outline: none;
}

Чтобы получить желаемые результаты, вам необходимо настроить абсолютное значение.позиционирование, так:

1. large screen, modal max-width 200px
@media screen and (min-width: 900px) {
    max-width: 200px;
    left: calc(50% - 100px);
}

2. medium screen, modal about 80% screen width
@media screen and (min-width: 475px) and (max-width: 900px) {
    left: 10%;
    right: 10%;
    top: 10%;
    bottom: 10%;
}

3. mobile screen, modal full width
@media screen and (max-width: 475px) {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}