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">&times;</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