React-Bootstrap 全屏模式对话框答案

【问题标题】：React-Bootstrap Full screen Modal DialogReact-Bootstrap 全屏模式对话框
【发布时间】：2021-09-02 00:05:31
【问题描述】：

我目前正在尝试让 react-bootstrap 中包含的 Modal 组件显示为全屏。

我可以从文档中看到，对话框的各个组件（模态、页眉、页脚、正文）通过“bsClass”接受自定义类，但是一旦呈现高度就会受到另一个具有“模态-”类的 div 的限制内容”，但看不到将自定义类传递给它的方法。

是否可以这样做，或者是否有另一种方法可以在对话框呈现后无需手动更改类来实现相同的效果？

【问题讨论】：

【解决方案1】：

是的，在他们的网站上有记录，但您只能更改 base class 和 subcomponent，例如 Modal.header, Modal.footer 不添加 custom classes，因此使用 CSS 代码可能会遇到一些困难，这是我的模态代码，

     <Modal
      {...this.props}
      show={this.state.show}
      onHide={this.hideModal}
      dialogClassName="custom-modal"
      bsClass="my-modal"
    >

使用下面的 CSS 代码，我可以让引导代码全屏显示

@media (min-width: 992px)
.my-modal-lg {
    width: auto;
}

@media (min-width: 768px)
.my-modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
 }

@media (min-width: 768px)
.my-modal-content {
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    height: auto;
    min-height: 100%;
    border-radius: 0;
}

为了更好地控制您的modaldata、form、text，我建议查看以下 GitHub react-bootstrap-modal repo

https://github.com/jquense/react-bootstrap-modal

如果你想尝试除bootstrap modal 之外的任何东西，那么你也可以通过访问以下网址查看react-modal，

https://github.com/reactjs/react-modal

【讨论】：

【解决方案2】：

编辑：感谢 Aravind Reddy 指出全屏道具仅在 v5 中可用。

大小使用示例

  const [smShow, setSmShow] = useState(false);
  const [lgShow, setLgShow] = useState(false);

  return (
    <>
      <Button onClick={() => setSmShow(true)}>Small modal</Button>{' '}
      <Button onClick={() => setLgShow(true)}>Large modal</Button>
      <Modal
        size="sm"
        show={smShow}
        onHide={() => setSmShow(false)}
        aria-labelledby="example-modal-sizes-title-sm"
      >
        <Modal.Header closeButton>
          <Modal.Title id="example-modal-sizes-title-sm">
            Small Modal
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>...</Modal.Body>
      </Modal>
      <Modal
        size="lg"
        show={lgShow}
        onHide={() => setLgShow(false)}
        aria-labelledby="example-modal-sizes-title-lg"
      >
        <Modal.Header closeButton>
          <Modal.Title id="example-modal-sizes-title-lg">
            Large Modal
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>...</Modal.Body>
      </Modal>
    </>
  );
}

render(<Example />);

还有全屏的例子

  const values = [true, 'sm-down', 'md-down', 'lg-down', 'xl-down', 'xxl-down'];
  const [fullscreen, setFullscreen] = useState(true);
  const [show, setShow] = useState(false);

  function handleShow(breakpoint) {
    setFullscreen(breakpoint);
    setShow(true);
  }

  return (
    <>
      {values.map((v, idx) => (
        <Button key={idx} className="me-2" onClick={() => handleShow(v)}>
          Full screen
          {typeof v === 'string' && `below ${v.split('-')[0]}`}
        </Button>
      ))}
      <Modal show={show} fullscreen={fullscreen} onHide={() => setShow(false)}>
        <Modal.Header closeButton>
          <Modal.Title>Modal</Modal.Title>
        </Modal.Header>
        <Modal.Body>Modal body content</Modal.Body>
      </Modal>
    </>
  );
}

render(<Example />);

【讨论】：

不错的尝试从文档复制粘贴。全屏道具仅随 v5 提供
是的，这些示例是从我也链接并根据本文档说明的文档中复制的。我以为它们是最新版本。

【解决方案3】：

试试这个 CSS 代码，

  .custom-modal{
     width: 100VW;
     height: 100VH;
    }

【讨论】：

【解决方案4】：

使用来自 ConAirCode 和 React-Bootstrap 文档的想法，这就是我所做的：

<Modal id="fullScreenModalId" show={show} onHide={handleClose} dialogClassName="fullscreen-modal" >
    <Modal.Header closeButton>
        <Modal.Title>Full Screen</Modal.Title>
    </Modal.Header>
    <Modal.Body>
         I'm full screen
    </Modal.Body>
    <Modal.Footer>
         <Button variant="secondary" onClick={handleClose}>
              Minimize Screen
         </Button>
         <Button variant="primary" onClick={handleSaveAll}>
              Save Changes
         </Button>
     </Modal.Footer>
</Modal>

用这个作为css：

.fullscreen-modal.modal-dialog  {
    position: absolute;
    top: 40px;
    left: 40px;
    right: 40px;
    bottom: 40px;
    background-color: papayawhip;
}

.fullscreen-modal .modal-content {
    position: fixed;
    top: 50px;
    left: 50px;
    right: 50px;
    bottom: 50px;
    background-color: rebeccapurple;
 }

css 引用对于引用正确的元素很重要。特别注意空间的位置。它们对于实际引用正确的元素是必要的，同时也避免引用您可能拥有的所有模态。另外，我不确定 css 对 modal-dialog 的重要性，因为 modal-content 元素与这些设置重叠。注意：状态变量和方法应该是自我解释的（我没有包括所有方法和状态变量，因为它们对问题并不重要）。

【讨论】：