Modal

Modal dialogs.

When To Use

When requiring users to interact with the application, but without jumping to a new page and interrupting the user's workflow, you can use Modal to create a new floating layer over the current page to get user feedback or display information.

Examples

Basic

<template>
  <div>
    <a-button type="primary" @click="showModal">Open Modal</a-button>
    <a-modal v-model:visible="visible" title="Basic Modal" @ok="handleOk">
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </a-modal>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)

const showModal = () => {
  visible.value = true
}

const handleOk = (e) => {
  console.log(e)
  visible.value = false
}
</script>

Asynchronously close

<template>
  <div>
    <a-button type="primary" @click="showModal">Open Modal with async logic</a-button>
    <a-modal
      v-model:visible="visible"
      title="Title"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
    >
      <p>{{ modalText }}</p>
    </a-modal>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)
const confirmLoading = ref(false)
const modalText = ref('Content of the modal')

const showModal = () => {
  visible.value = true
}

const handleOk = () => {
  modalText.value = 'The modal will be closed after two seconds'
  confirmLoading.value = true
  setTimeout(() => {
    visible.value = false
    confirmLoading.value = false
  }, 2000)
}
</script>

Customized Footer

<template>
  <div>
    <a-button type="primary" @click="showModal">Open Modal with customized footer</a-button>
    <a-modal v-model:visible="visible" title="Title">
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
      <template #footer>
        <a-button key="back" @click="handleCancel">Return</a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
          Submit
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)
const loading = ref(false)

const showModal = () => {
  visible.value = true
}

const handleOk = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    visible.value = false
  }, 3000)
}

const handleCancel = () => {
  visible.value = false
}
</script>

Confirmation modal dialog

<template>
  <div>
    <a-button @click="showConfirm">Confirm</a-button>
    <a-button type="dashed" @click="showDeleteConfirm">Delete</a-button>
    <a-button type="dashed" @click="showPropsConfirm">With extra props</a-button>
  </div>
</template>

<script setup>
import { Modal } from 'ant-design-vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { createVNode } from 'vue'

const showConfirm = () => {
  Modal.confirm({
    title: 'Do you Want to delete these items?',
    icon: createVNode(ExclamationCircleOutlined),
    content: 'Some descriptions',
    onOk() {
      console.log('OK')
    },
    onCancel() {
      console.log('Cancel')
    },
  })
}

const showDeleteConfirm = () => {
  Modal.confirm({
    title: 'Are you sure delete this task?',
    icon: createVNode(ExclamationCircleOutlined),
    content: 'Some descriptions',
    okText: 'Yes',
    okType: 'danger',
    cancelText: 'No',
    onOk() {
      console.log('OK')
    },
    onCancel() {
      console.log('Cancel')
    },
  })
}

const showPropsConfirm = () => {
  Modal.confirm({
    title: 'Are you sure delete this task?',
    icon: createVNode(ExclamationCircleOutlined),
    content: 'Some descriptions',
    okText: 'Yes',
    okType: 'danger',
    okButtonProps: {
      disabled: true,
    },
    cancelText: 'No',
    onOk() {
      console.log('OK')
    },
    onCancel() {
      console.log('Cancel')
    },
  })
}
</script>

Information modal dialog

<template>
  <div>
    <a-button @click="info">Info</a-button>
    <a-button @click="success">Success</a-button>
    <a-button @click="error">Error</a-button>
    <a-button @click="warning">Warning</a-button>
  </div>
</template>

<script setup>
import { Modal } from 'ant-design-vue'

const info = () => {
  Modal.info({
    title: 'This is a notification message',
    content: 'some messages...some messages...',
  })
}

const success = () => {
  Modal.success({
    title: 'This is a success message',
    content: 'some messages...some messages...',
  })
}

const error = () => {
  Modal.error({
    title: 'This is an error message',
    content: 'some messages...some messages...',
  })
}

const warning = () => {
  Modal.warning({
    title: 'This is a warning message',
    content: 'some messages...some messages...',
  })
}
</script>

API

Modal

Property	Description	Type	Default	Version
afterClose	Specify a function that will be called when modal is closed completely	function	-
bodyStyle	Body style for modal body element. Such as height, padding etc	object	{}
cancelButtonProps	The cancel button props	ButtonProps	-
cancelText	Text of the Cancel button	string | slot	Cancel
centered	Centered Modal	boolean	false
closable	Whether a close (x) button is visible on top right of the modal dialog or not	boolean	true
closeIcon	Custom close icon	VNode | slot	-
confirmLoading	Whether to apply loading visual effect for OK button or not	boolean	false
destroyOnClose	Whether to unmount child components on onClose	boolean	false
dialogClass	The className of the dialog	string	-
dialogStyle	The style of the dialog	object	-
footer	Footer content, set as :footer="null" when you don't need default buttons	string | slot	OK and Cancel buttons
forceRender	Force render Modal	boolean	false
getContainer	The mount node for Modal	(instance): HTMLElement	() => document.body
keyboard	Whether support press esc to close	boolean	true
mask	Whether show mask or not	boolean	true
maskClosable	Whether to close the modal dialog when the mask (area outside the modal) is clicked	boolean	true
maskStyle	Style for modal's mask element	object	{}
okButtonProps	The ok button props	ButtonProps	-
okText	Text of the OK button	string | slot	OK
okType	Button type of the OK button	string	primary
title	The modal dialog's title	string | slot	-
visible(v-model)	Whether the modal dialog is visible or not	boolean	false
width	Width of the modal dialog	string | number	520
wrapClassName	The class name of the container of the modal dialog	string	-
zIndex	The z-index of the Modal	number	1000

Modal Events

Events Name	Description	Arguments	Version
cancel	Specify a function that will be called when a user clicks mask, close button on top right or Cancel button	function(e)
ok	Specify a function that will be called when a user clicks the OK button	function(e)

Note

The state of Modal will be preserved at it's component lifecycle by default, if you wish to open it with a brand new state everytime, set destroyOnClose on it.

Modal.method()

There are five ways to display the information based on the content's nature:

• Modal.info
• Modal.success
• Modal.error
• Modal.warning
• Modal.confirm

The items listed above are all functions, expecting a settings object as parameter. The properties of the object are follows:

Property	Description	Type	Default	Version
appContext	The context of the app	-	-
autoFocusButton	Specify which button to autofocus	null | ok | cancel	ok
cancelButtonProps	The cancel button props	ButtonProps	-
cancelText	Text of the Cancel button with Modal.confirm	string	Cancel
centered	Centered Modal	boolean	false
class	The className of container	string	-
closable	Whether a close (x) button is visible on top right of the modal dialog or not	boolean	false
content	Content	string | VNode | function	-
icon	Custom icon	VNode | ()=>VNode	-
keyboard	Whether support press esc to close	boolean	true
mask	Whether show mask or not	boolean	true
maskClosable	Whether to close the modal dialog when the mask (area outside the modal) is clicked	boolean	false
okButtonProps	The ok button props	ButtonProps	-
okText	Text of the OK button	string	OK
okType	Button type of the OK button	string	primary
style	Style of floating layer, typically used at least for adjusting the position	CSSProperties	-
title	Title	string | VNode | function	-
width	Width of the modal dialog	string | number	416
wrapClassName	The class name of the container of the modal dialog	string	-
zIndex	The z-index of the Modal	number	1000
onCancel	Specify a function that will be called when the user clicks the Cancel button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed	function	-
onOk	Specify a function that will be called when the user clicks the OK button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed	function	-

All the Modal.methods will return a reference, and then we can update and close the modal dialog by the reference.

const modal = Modal.info();

modal.update({
  title: 'Updated title',
  content: 'Updated content',
});

modal.destroy();

• Modal.destroyAll

Modal.destroyAll() could destroy all confirmation modal dialogs(Modal.confirm|success|info|error|warning). Usually, you can use it in router change event to destroy confirm modal dialog automatically without use modal reference to close( it's too complex to use for all modal dialogs)

import { browserHistory } from 'react-router';

// router change
browserHistory.listen(() => {
  Modal.destroyAll();
});