Modal
Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
import {Modal} from '@/components'
Global usage
Vue.component(Modal.name, Modal)
For local usage
export default {
components: {
Modal
}
}
Example
Show Code
Variations
Show Code
Modal props
Prop Name | Type | Default | Description |
---|---|---|---|
show | Boolean | N/A | |
showClose | Boolean | true | |
centered | Boolean | N/A | |
appendToBody | Boolean | true | Whether modal should be appended to document body |
scrollToBottom | Boolean | true | Whether modal should scroll to it's bottom automatically |
type | String | N/A | Modal type (notice|mini|"") |
modalClasses | Object | String | N/A | Modal dialog css classes |
modalContentClasses | Object | String | N/A | Modal dialog content css classes |
gradient | String | N/A | Modal gradient type (danger, primary etc) |
headerClasses | Object | String | N/A | Modal Header css classes |
bodyClasses | Object | String | N/A | Modal Body css classes |
footerClasses | Object | String | N/A | Modal Footer css classes |
animationDuration | Number | 500 | Modal transition duration |
Modal Slots
Slot | Description |
---|---|
default | Default content for modal |
header | Modal header content |
footer | Modal footer content |
close-button | Content for modal close button |