And those use cases are just the start. TinyMCE is incredibly flexible, and with hundreds of APIs there’s likely a solution for your editor project. If you haven’t experienced Tiny Cloud, get started today. You’ll even get a free trial of our premium plugins – no credit card required!
Modal
Use BootstrapVueNext's BModal directive to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Modal Components
A JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content. Included below are the modal header, modal body, and modal footer.
<template>
<BModal
title="Modal title"
ok-title="Save changes"
cancel-title="Close"
body="Modal body text goes here."
>
<template #modal-footer>
<BButton variant="secondary">Close</BButton>
<BButton variant="primary">Save changes</BButton>
</template>
</BModal>
</template>
Live demo
Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
<template>
<BButton variant="primary" @click="showModal">Launch Demo Modal</BButton>
<BModal v-model="isModalVisible">
<!-- Modal Title -->
<template #title>
<h1 class="fs-5">Modal title</h1>
</template>
<!-- Modal Body -->
<p>Woo-hoo, you're reading this text in a modal!</p>
<!-- Modal Footer -->
<template #footer>
<BButton variant="secondary" @click="isModalVisible = false">Close</BButton>
<BButton variant="primary" @click="confirmModal">Save changes</BButton>
</template>
</BModal>
</template>
<script>
export default {
setup() {
const isModalVisible = ref(false);
const showModal = () => {
isModalVisible.value = true;
};
const confirmModal = () => {
// Perform any confirmation action here
isModalVisible.value = false;
};
return {
isModalVisible,
showModal,
confirmModal,
};
},
};
</script>
Scrolling long content
When modals become too long for the user's viewport or device, they scroll independent of the page itself.
<template>
<BButton variant="primary" @click="showModal">Modal long scrolling content</BButton>
<BModal v-model="isModalVisible">
<!-- Modal Title -->
<template #title>
<h1 class="fs-5">Modal title</h1>
</template>
<!-- Modal Body -->
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus
ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur
ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus
magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus
ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur
ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus
magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus
ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur
ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus
magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus
ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur
ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus
magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus
ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur
ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus
magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus
ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur
ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus
magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<!-- Modal Footer -->
<template #footer>
<BButton variant="secondary" @click="isModalVisible = false">Close</BButton>
<BButton variant="primary" @click="confirmModal">Save changes</BButton>
</template>
</BModal>
</template>
<script>
export default {
setup() {
const isModalVisible = ref(false);
const showModal = () => {
isModalVisible.value = true;
};
const confirmModal = () => {
// Perform any confirmation action here
isModalVisible.value = false;
};
return {
isModalVisible,
showModal,
confirmModal,
};
},
};
</script>
Vertically centered
Add centered prop to vertically center the modal.
<template>
<BButton variant="primary" @click="showModal">Vertically centered modal</BButton>
<BModal v-model="isModalVisible" centered>
<!-- Modal Title -->
<template #title>
<h1 class="fs-5">Modal title</h1>
</template>
<!-- Modal Body -->
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<!-- Modal Footer -->
<template #footer>
<BButton variant="secondary" @click="isModalVisible = false">Close</BButton>
<BButton variant="primary" @click="confirmModal">Save changes</BButton>
</template>
</BModal>
</template>
<script>
export default {
setup() {
const isModalVisible = ref(false);
const showModal = () => {
isModalVisible.value = true;
};
const confirmModal = () => {
// Perform any confirmation action here
isModalVisible.value = false;
};
return {
isModalVisible,
showModal,
confirmModal,
};
},
};
</script>
| Props | Value | Default |
|---|---|---|
centered |
Boolean | false |
Optional sizes
Modals have two optional sizes - lg and sm, available via size prop.
<template>
<BButton variant="primary" @click="showModal1"> Large Modal </BButton>
<BButton variant="primary" @click="showModal2"> Small Modal </BButton>
<!-- Large modal -->
<BModal v-model="showModalLg" size="lg">
<template #title>
<h1 class="fs-5">Modal title</h1>
</template>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<template #footer>
<BButton variant="secondary" @click="showModalLg = false">Close</BButton>
<BButton variant="primary" @click="confirmModal1">Save changes</BButton>
</template>
</BModal>
<!-- Small modal -->
<BModal v-model="showModalSm" size="sm">
<template #title>
<h1 class="fs-5">Modal title</h1>
</template>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<template #footer>
<BButton variant="secondary" @click="showModalSm = false">Close</BButton>
<BButton variant="primary" @click="confirmModal2">Save changes</BButton>
</template>
</BModal>
</template>
| Props | Value | Default |
|---|---|---|
size |
sm / lg | md |
Modal with elements
Place a popover, a tooltip, forms, an editor or even a carousel within modals as needed.
<template>
<BButton variant="secondary" @click="showModal1">Modal with Popover & Tooltip</BButton>
<BButton variant="secondary" @click="showModal2"> Modal with Form </BButton>
<BButton variant="secondary" @click="showModal3"> Modal with Editor </BButton>
<BButton variant="secondary" @click="showModal4"> Modal with Carousel </BButton>
<BButton variant="secondary" @click="showModal5"> Modal with Scroll </BButton>
<!-- Modal popovers -->
<BModal v-model="showModalEl1">
<template #title>
<h1 class="fs-5">Modal With Popover</h1>
</template>
<h5>Popover</h5>
<p class="my-5">
This
<BButton
v-b-popover.click="{
title: 'Popover title',
content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
placement: 'right',
}"
variant="secondary"
size="sm"
>
Button
</BButton>
triggers a popover on click.
</p>
<h5>Tooltips</h5>
<p class="mt-3">
<a href="#" v-b-tooltip="'Tooltip'">This link</a>
and
<a href="#" v-b-tooltip="'Tooltip'">that link</a>
have tooltips on hover.
</p>
<template #footer>
<BButton variant="secondary" @click="showModalEl1 = false">Close</BButton>
<BButton variant="primary" @click="confirmModal1">Save changes</BButton>
</template>
</BModal>
<!-- Modal forms-->
<BModal v-model="showModalEl2" hideFooter>
<template #title>
<h1 class="fs-5">Modal With Form</h1>
</template>
<BForm>
<BFormGroup
id="input-group-1"
label="Email address"
label-for="input-1"
class="mb-3"
>
<BFormInput
id="input-1"
type="email"
placeholder="email@example.com"
required
/>
</BFormGroup>
<BFormGroup
id="input-group-2"
label="Password"
label-for="input-2"
class="mb-3"
>
<BFormInput id="input-2" type="password" placeholder="Password" required />
</BFormGroup>
<BFormGroup id="input-group-3" class="mb-3">
<BFormCheckboxGroup id="checkboxes-3">
<BFormCheckbox value="me">Check me out</BFormCheckbox>
</BFormCheckboxGroup>
</BFormGroup>
<BButton type="submit" variant="primary">Sign In</BButton>
</BForm>
</BModal>
<!-- Modal Editor -->
<BModal v-model="showModalEl3" size="lg" hideFooter>
<template #title>
<h1 class="fs-5">Modal With Editor</h1>
</template>
<div class="demo-dfree">
<div
class="dfree-body mce-content-body form-control h-auto"
contenteditable="true"
style="position: relative"
spellcheck="false"
>
<p>
And those use cases are just the start. TinyMCE is incredibly flexible,
and with hundreds of APIs there’s likely a solution for your editor
project. If you haven’t experienced Tiny Cloud, get started today. You’ll
even get a free trial of our premium plugins – no credit card required!
</p>
</div>
</div>
</BModal>
<!-- Modal Carousel-->
<BModal v-model="showModalEl4" size="lg" body-class="p-0" hideFooter>
<template #title>
<h1 class="fs-5">Modal With Carousel</h1>
</template>
<BCarousel controls indicators ride="carousel" ride-reverse="true">
<BCarouselSlide :img-src="slide1" />
<BCarouselSlide :img-src="slide2" />
<BCarouselSlide :img-src="slide3" />
</BCarousel>
</BModal>
<!-- Modal with Scroll -->
<BModal v-model="showModalEl5" body-class="p-0 h-400p" hideFooter>
<template #title>
<h1 class="fs-5">Scrollable Contents</h1>
</template>
<simplebar class="nicescroll-bar">
<div class="p-5">
<p class="mb-5">
Other than the content you own, under these Terms, Company Name and/or its
licensors own all the intellectual property rights and materials contained
in this Website.
</p>
<p class="mb-5">
Other than the content you own, under these Terms, Company Name and/or its
licensors own all the intellectual property rights and materials contained
in this Website.
</p>
<p class="mb-5">
Other than the content you own, under these Terms, Company Name and/or its
licensors own all the intellectual property rights and materials contained
in this Website.
</p>
<p class="mb-5">
Other than the content you own, under these Terms, Company Name and/or its
licensors own all the intellectual property rights and materials contained
in this Website.
</p>
<p>
Other than the content you own, under these Terms, Company Name and/or its
licensors own all the intellectual property rights and materials contained
in this Website.
</p>
</div>
</simplebar>
</BModal>
</template>
<script>
//images
import slide1 from "@/assets/img/slide1.jpg";
import slide2 from "@/assets/img/slide2.jpg";
import slide3 from "@/assets/img/slide3.jpg";
export default {
data() {
return {
slide1,
slide2,
slide3,
};
},
setup() {
const showModalEl1 = ref(false);
const showModalEl2 = ref(false);
const showModalEl3 = ref(false);
const showModalEl4 = ref(false);
const showModalEl5 = ref(false);
const showModal1 = () => {
showModalEl1.value = true;
};
const showModal2 = () => {
showModalEl2.value = true;
};
const showModal3 = () => {
showModalEl3.value = true;
};
const showModal4 = () => {
showModalEl4.value = true;
};
const showModal5 = () => {
showModalEl5.value = true;
};
const confirmModal1 = () => {
// Perform any confirmation action here
showModalEl1.value = false;
};
const confirmModal2 = () => {
// Perform any confirmation action here
showModalEl2.value = false;
};
const confirmModal3 = () => {
// Perform any confirmation action here
showModalEl3.value = false;
};
const confirmModal4 = () => {
// Perform any confirmation action here
showModalEl4.value = false;
};
const confirmModal5 = () => {
// Perform any confirmation action here
showModalEl5.value = false;
};
return {
showModalEl1,
showModalEl2,
showModalEl3,
showModalEl4,
showModalEl5,
showModal1,
showModal2,
showModal3,
showModal4,
showModal5,
confirmModal1,
confirmModal2,
confirmModal3,
confirmModal4,
confirmModal5,
};
},
};
</script>
