# Modal
Modal component can be used to display alerts, custom content or notification lightbox for user.
# Simple usage
Modal
component is compatible with Bootstrap's modal. Any content that you provide inside the default
modal slot
will be wrapped inside .modal-content
div. You can use these available Bootstrap classes to structure content inside
your modal component:
modal-header
modal-body
modal-footer
You can read more about modal here (opens new window)
# Controlling visibility
There are few ways you can control visibility of modal. Firstly you could use $refs
and reference your modal component
and use openModal
and closeModal
methods to open or close the modal.
<Modal ref="modal">
<div class="modal-body p-5">
<div class="font-size-150 font-weight-bold text-center">
Sign up
</div>
<div class="font-size-100 color-gray-600 text-center">
And receive some awesome perks!
</div>
<div class="mt-4">
<form>
<Input placeholder="John Doe">
<template #label>Full name</template>
</Input>
<Input placeholder="john@doe.com">
<template #label>Email address</template>
</Input>
<Input placeholder="Password" type="password">
<template #label>Account password</template>
</Input>
<div class=" mt-4 d-flex flex-row justify-content-between align-items-center">
<Checkbox>
<span class="font-size-75">I Accept to our terms and conditions</span>
</Checkbox>
<Button>Register now</Button>
</div>
</form>
</div>
</div>
</Modal>
<Button @click="$refs.modal.openModal()">Open Modal</Button>
Another way to control the visibility of modal is to use open
property and provide the value directly to Modal
. When using this method, you also
need to listen to @closed
event and make sure to set open
prop variable to false
as modal is closed internally whenever user clicks on modal backdrop
<Modal :open="modalOpen" @closed="modalOpen=false">
<div class="modal-header">
<b class="font-size-125">Modal header</b>
<button @click="modalOpen = false" type="button" class="close outline-none" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="font-size-150">×</span>
</button>
</div>
<div class="modal-body">
<p>Subscribe to modal newsletter</p>
<Input type="email" size="lg" placeholder="E-mail address"></Input>
<div class="d-flex flex-row justify-content-center">
<Button size="lg">Subscribe</Button>
</div>
</div>
</Modal>
<Button @click="modalOpen = true">Open modal by prop</Button>
<script>
export default{
data(){
return {
modalOpen:false,
}
}
}
</script>
# Disabled backdrop click
You can use disableBackdropExit
prop to disable automatic exit when user clicks on modal backdrop. However, then you need to
manually make sure that modal can be closed by providing close button.
<script>
export default{
data(){
return {
modalOpen2:false,
}
}
}
</script>
# Props
name | default | description | required | type |
---|---|---|---|---|
open | false | Control for showing modal. If set to true - modal will be displayed. If false - modal will be hidden. | true | Boolean |
dialogScrollable | false | If provided as true, .modal-dialog-scrollable class will be added to .modal-dialog and will make it scrollable if content exceeds viewport height. | false | Boolean |
dialogVerticallyCentered | false | If provided as true, .modal-dialog-centered will be added to .modal-dialog. | false | Boolean |
dialogSize | Custom optional size classes for .modal-dialog. Available ones: modal-sm, modal-lg, modal-xl. | false | String |
← Input Navigation Bar →