Question

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

我可以从文档中看到对话框的各个组件（模态，页眉，页脚，正文）通过＆＃34; bsClass＆＃34;接受自定义类，但是一旦渲染，高度受到另一个div的限制类＆＃34;模态内容＆＃34;，但看不到将自定义类传递给它的方法。

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

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

@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以外的任何内容，那么您还可以访问以下网址查看react-modal，

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

Answer 2

使用尺寸的例子

  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 />);

Answer 3

尝试使用此CSS代码

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

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

React-Bootstrap全屏模态对话框

4 个答案: