diff --git a/examples/routers/modal.vue b/examples/routers/modal.vue
index 1ffae9029..c5593f14d 100644
--- a/examples/routers/modal.vue
+++ b/examples/routers/modal.vue
@@ -1,106 +1,121 @@
-<template>
-    <Button @click="instance('info')">Info</Button>
-    <Button @click="instance('success')">Success</Button>
-    <Button @click="instance('warning')">Warning</Button>
-    <Button @click="instance('error')">Error</Button>
-    <Divider></Divider>
-    <Button @click="confirm">Normal</Button>
-    <Button @click="custom">Custom button text</Button>
-    <Button @click="async">Asynchronous closing</Button>
-    <p>
-        Name: {{ value }}
-    </p>
-    <p>
-        <Button @click="handleRender">Custom content</Button>
-    </p>
+ <template>
+  <Modal
+    v-model="visible"
+    v-model:fullscreen-value="fullscreen"
+    showFullscreenIcon
+    :closable="true"
+    title="Common Modal dialog box title"
+  >
+    <p>Content of dialog</p>
+    <p>Content of dialog</p>
+    <p>Content of dialog</p>
+  </Modal>
+  <Button @click="instance('info')">Info</Button>
+  <Button @click="instance('success')">Success</Button>
+  <Button @click="instance('warning')">Warning</Button>
+  <Button @click="instance('error')">Error</Button>
+  <Divider></Divider>
+  <Button @click="confirm">Normal</Button>
+  <Button @click="custom">Custom button text</Button>
+  <Button @click="async">Asynchronous closing</Button>
+  <p>Name: {{ value }}</p>
+  <p>
+    <Button @click="handleRender">Custom content</Button>
+  </p>
 </template>
 <script>
-import ViewUI from '../../src/index';
+import ViewUI from "../../src/index";
 export default {
-    data () {
-        return {
-            value: ''
-        }
+  data() {
+    return {
+      visible: true,
+      fullscreen: false,
+      value: "",
+    };
+  },
+  methods: {
+    changeFull() {
+      this.$Message.info(this.fullscreen + "");
     },
-    methods: {
-        instance (type) {
-            const title = 'Title';
-            const content = '<p>Content of dialog</p><p>Content of dialog</p>';
-            switch (type) {
-                case 'info':
-                    this.$Modal.info({
-                        title: title,
-                        content: content,
-                        onOk: () => {
-                            this.$Message.info('Clicked ok');
-                        },
-                    });
-                    break;
-                case 'success':
-                    this.$Modal.success({
-                        title: title,
-                        content: content
-                    });
-                    break;
-                case 'warning':
-                    this.$Modal.warning({
-                        title: title,
-                        content: content
-                    });
-                    break;
-                case 'error':
-                    this.$Modal.error({
-                        title: title,
-                        content: content
-                    });
-                    break;
-            }
+    instance(type) {
+      const title = "Title";
+      const content = "<p>Content of dialog</p><p>Content of dialog</p>";
+      switch (type) {
+        case "info":
+          this.$Modal.info({
+            title: title,
+            content: content,
+            onOk: () => {
+              this.$Message.info("Clicked ok");
+            },
+          });
+          break;
+        case "success":
+          this.$Modal.success({
+            title: title,
+            content: content,
+          });
+          break;
+        case "warning":
+          this.$Modal.warning({
+            title: title,
+            content: content,
+          });
+          break;
+        case "error":
+          this.$Modal.error({
+            title: title,
+            content: content,
+          });
+          break;
+      }
+    },
+    confirm() {
+      this.$Modal.confirm({
+        title: "Title",
+        content: "<p>Content of dialog</p><p>Content of dialog</p>",
+        onOk: () => {
+          this.$Message.info("Clicked ok");
         },
-        confirm () {
-            this.$Modal.confirm({
-                title: 'Title',
-                content: '<p>Content of dialog</p><p>Content of dialog</p>',
-                onOk: () => {
-                    this.$Message.info('Clicked ok');
-                },
-                onCancel: () => {
-                    this.$Message.info('Clicked cancel');
-                }
-            });
+        onCancel: () => {
+          this.$Message.info("Clicked cancel");
         },
-        custom () {
-            this.$Modal.confirm({
-                title: 'Title',
-                content: '<p>Content of dialog</p><p>Content of dialog</p>',
-                okText: 'OK',
-                cancelText: 'Cancel'
-            });
+      });
+    },
+    custom() {
+      this.$Modal.confirm({
+        title: "Title",
+        content: "<p>Content of dialog</p><p>Content of dialog</p>",
+        okText: "OK",
+        cancelText: "Cancel",
+      });
+    },
+    async() {
+      this.$Modal.confirm({
+        title: "Title",
+        content: "<p>The dialog box will be closed after 2 seconds</p>",
+        loading: true,
+        onOk: () => {
+          setTimeout(() => {
+            this.$Modal.remove();
+            this.$Message.info("Asynchronously close the dialog box");
+          }, 2000);
         },
-        async () {
-            this.$Modal.confirm({
-                title: 'Title',
-                content: '<p>The dialog box will be closed after 2 seconds</p>',
-                loading: true,
-                onOk: () => {
-                    setTimeout(() => {
-                        this.$Modal.remove();
-                        this.$Message.info('Asynchronously close the dialog box');
-                    }, 2000);
-                }
-            });
+      });
+    },
+    handleRender() {
+      this.$Modal.confirm({
+        render: (h) => {
+          return h(ViewUI.Input, {
+            // todo 不能直接写 'Input' ?
+            modelValue: this.value,
+            autofocus: true,
+            placeholder: "Please enter your name...",
+            "onUpdate:modelValue": (val) => (this.value = val),
+          });
         },
-        handleRender () {
-            this.$Modal.confirm({
-                render: (h) => {
-                    return h(ViewUI.Input, { // todo 不能直接写 'Input' ?
-                        modelValue: this.value,
-                        autofocus: true,
-                        placeholder: 'Please enter your name...',
-                        'onUpdate:modelValue': (val) => this.value = val
-                    })
-                }
-            })
-        }
-    }
-}
+      });
+    },
+  },
+};
 </script>
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 806313ab9..3da68a294 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -7,6 +7,12 @@
             <transition :name="transitionNames[0]" @after-leave="animationFinish">
                 <div v-bind="$attrs" :class="classes" :style="mainStyles" v-show="visible" @mousedown="handleMousedown">
                     <div :class="contentClasses" ref="content" :style="contentStyles" @click="handleClickModal">
+                        <a :class="[prefixCls + '-fullscreen-icon']" :style="fullscreenIconStyles"
+                            v-if="showFullscreenIcon" @click="handleFullscreen">
+                            <slot name="fullscreen">
+                                <Icon :type="fullscreen ? 'ios-contract' : 'ios-expand'"></Icon>
+                            </slot>
+                        </a>
                         <a :class="[prefixCls + '-close']" v-if="closable" @click="close">
                             <slot name="close">
                                 <Icon type="ios-close"></Icon>
@@ -59,7 +65,7 @@
         name: 'Modal',
         mixins: [ Locale, ScrollbarMixins ],
         components: { Icon, iButton },
-        emits: ['on-cancel', 'on-ok', 'on-hidden', 'on-visible-change', 'update:modelValue'],
+        emits: ['on-cancel', 'on-ok', 'on-hidden', 'on-visible-change', 'on-fullscreen', 'update:modelValue', 'update:fullscreenValue'],
         provide () {
             return {
                 ModalInstance: this
@@ -129,7 +135,11 @@
                     return !global.$VIEWUI || global.$VIEWUI.transfer === '' ? true : global.$VIEWUI.transfer;
                 }
             },
-            fullscreen: {
+            fullscreenValue: {
+                type: Boolean,
+                default: false
+            },
+            showFullscreenIcon: {
                 type: Boolean,
                 default: false
             },
@@ -170,6 +180,7 @@
                 showHead: true,
                 buttonLoading: false,
                 visible: this.modelValue,
+                fullscreen: this.fullscreenValue,
                 dragData: deepCopy(dragData),
                 modalIndex: this.handleGetModalIndex(),  // for Esc close the top modal
                 isMouseTriggerIn: false, // #5800
@@ -253,6 +264,17 @@
 
                 return style;
             },
+            fullscreenIconStyles () {
+                let style = {};
+
+                const styleRight = {
+                    right: this.closable ? '44px' : '14px'
+                };
+
+                Object.assign(style, styleRight);
+
+                return style;
+            },
             localeOkText () {
                 if (this.okText === undefined) {
                     return this.t('i.modal.okText');
@@ -272,6 +294,11 @@
             }
         },
         methods: {
+            handleFullscreen () {
+                this.fullscreen = !this.fullscreen;
+                this.$emit('update:fullscreenValue', this.fullscreen);
+                this.$emit('on-fullscreen', this.fullscreen);
+            },
             close () {
                 if (!this.beforeClose) {
                     return this.handleClose();
@@ -473,6 +500,11 @@
                     this.dragData = deepCopy(dragData);
                 }
             },
+            fullscreenValue (val) {
+                if (val === this.fullscreen) return;
+                this.fullscreen = val;
+                this.$emit('on-fullscreen', this.fullscreen);
+            },
             loading (val) {
                 if (!val) {
                     this.buttonLoading = false;
diff --git a/src/styles/components/modal.less b/src/styles/components/modal.less
index 29deab95d..ab2d04af1 100644
--- a/src/styles/components/modal.less
+++ b/src/styles/components/modal.less
@@ -61,6 +61,20 @@
         .content-header;
     }
 
+    &-fullscreen-icon {
+        z-index: 1;
+        font-size: 18px;
+        position: absolute;
+        top: 10px;
+        overflow: hidden;
+        cursor: pointer;
+        color: @legend-color;
+        transition: color @transition-time ease;
+        &:hover {
+            color: #444;
+        }
+    }
+
     &-close {
         z-index: 1;
         .content-close(1px, 31px);