javascript - react 模态动态调整大小

Question

我正在使用 react-modal这太棒了。是否可以动态调整它的大小(可能使用 css 媒体标签)。例如，

1. 对于大屏幕，模态框只占屏幕的一小部分(假设最大宽度为 200 像素；
2. 对于中等屏幕，模态框占据了大部分屏幕(比方说占屏幕宽度和高度的 80%
3. 对于移动设备，它占用 100% 的宽度和高度。

Answer 1

看看这段为你准备的代码。

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'))

在响应式 View 中结帐:

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">"

快乐编码。