Modal 增加全屏功能

[wizard-a]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

在做大数据产品，做数据预览，会在 modal 上显示table， 列多的情况下需要全屏显示，还有一些在弹框内做一些特征列可视化也会有全屏的需求

What does the proposed API look like?

属性	说明	类型	默认值
fullScreen	设置Modal是否有全屏功能	boolean	false

[afc163]

可以直接使用原生的 fullscreen API：https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

[wizard-a]

原生的 fullscreen 把把浏览器的导航栏也影藏掉，加这个属性是想在浏览器的可视区域内做全屏显示。只是把modal 占满整个屏幕。在弹框的右上角加个按钮。如图

[afc163]

建议自行封装吧，暂时不会增加这样的功能。

如果内容比较多，也可以尝试 Drawer。

[yanlee26]

sign！！！

[Jkanon]

实现了一个支持全屏的modal，可以做个参考，代码位置：https://github.com/Jkanon/webmagician-ui/blob/master/src/components/Modal/InlineModal.tsx

[xiaoqiang-zhao]

如果是想占满整个网页，可以使用 css 重置的方式来实现:

import styles from './index.less';

<Modal
      className={styles.root}
      visible={isModalVisible}
      footer={null}>
      Some contents...<br />
      Some contents...<br />
      Some contents...<br />
</Modal>

index.less :

.root {
  top: 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  max-height: 100vh;
  padding: 0;
  font-size: 14px;

  :global {
    .acud-modal-content {
      height: 100%;
      border-radius: 0;
    }
  }
}

[Deepembrace]

antd vue 已弹出modal框不能widows窗口全屏吗