React-Bootstrap 全屏模态对话框

Question

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

我从文档中可以看出，对话框的 individual 组件（模态、页眉、页脚、正文）接受自定义 classes 到 "bsClass"，但是一次呈现的高度受到另一个 div 和 class "modal-content" 的限制，但看不到将自定义 class 传递给它的方法。

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

Answer 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 代码，我能够使 bootstrap 代码全屏显示

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

为了更好地控制您的 modal data、form、text 我建议您查看以下内容 GitHub react-bootstrap-modal回购

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

如果您想尝试 bootstrap modal 以外的任何东西，那么您也可以通过访问下面的 url、

查看 react-modal

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

Answer 2

试试这个 CSS 代码，

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

Answer 3

使用 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 对于模态对话框有多重要，因为模态内容元素与这些设置重叠。注意：状态变量和方法应该是不言自明的（我没有包括所有方法和状态变量，因为它们对问题不重要）。

Answer 4

编辑：感谢 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 />);

React-Bootstrap 全屏模态对话框

React-Bootstrap Full screen Modal Dialog

reactjs

react-bootstrap