BootstrapVue Modal
Our BootstrapVue modals are lightweight and multi-purpose popups that are built with HTML, CSS, and JavaScript. The three primary sections of a BootstrapVue modal are header, body, and footer. Modals are positioned over everything else in the document and remove scroll from the <body>
so that modal content scrolls instead. Use BootstrapVue’s JavaScript modal plugin to add dialogues to your site for lightboxes, user notifications, or completely custom content.
Keep reading our Bootstrap Modal examples and learn how to use it.
Example
Variations
Modal props
PROP NAME | TYPE | DEFAULT | DESCRIPTION |
---|---|---|---|
show | Boolean | N/A | |
showClose | Boolean | true | |
type | String | N/A | Modal type (notice/mini/””) |
modalClasses | Object / String | N/A | Modal dialog css classes |
size | String | N/A | Modal size |
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 events
NAME | DESCRIPTION | PARAMS |
---|---|---|
close | triggers when modal closes | the updated value |
Modal slots
SLOT | DESCRIPTION |
---|---|
default | Default content for modal |
header | Modal header content |
footer | Modal footer content |
close-button | Content for modal close button |
If you want to see more examples and properties please check the official BootstrapVue Documentation.