Modal

Classic modal overlay to include any content you may need

<template>
    <section>
        <button class="button is-primary is-medium"
            @click="isImageModalActive = true">
            Launch image modal
        </button>
        <button class="button is-primary is-medium"
            @click="isCardModalActive = true">
            Launch card modal (keep scroll)
        </button>

        <b-modal :active.sync="isImageModalActive">
            <p class="image is-4by3">
                <img src="/static/img/placeholder-1280x960.png">
            </p>
        </b-modal>

        <b-modal :active.sync="isCardModalActive" :width="640" scroll="keep">
            <div class="card">
                <div class="card-image">
                    <figure class="image is-4by3">
                        <img src="/static/img/placeholder-1280x960.png" alt="Image">
                    </figure>
                </div>
                <div class="card-content">
                    <div class="media">
                        <div class="media-left">
                            <figure class="image is-48x48">
                                <img src="/static/img/placeholder-1280x960.png" alt="Image">
                            </figure>
                        </div>
                        <div class="media-content">
                            <p class="title is-4">John Smith</p>
                            <p class="subtitle is-6">@johnsmith</p>
                        </div>
                    </div>

                    <div class="content">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Phasellus nec iaculis mauris. <a>@bulmaio</a>.
                        <a>#css</a> <a>#responsive</a>
                        <br>
                        <small>11:09 PM - 1 Jan 2016</small>
                    </div>
                </div>
            </div>
        </b-modal>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                isImageModalActive: false,
                isCardModalActive: false
            }
        }
    }
</script>

Component

A modal with a component. When you want to close the Modal, call the 'close' method — this.$parent.close() — from the injected component.

<template>
    <section>
        <button class="button is-primary is-medium"
            @click="isComponentModalActive = true">
            Launch component modal
        </button>

        <b-modal :active.sync="isComponentModalActive" has-modal-card>
            <modal-form v-bind="formProps"></modal-form>
        </b-modal>
    </section>
</template>

<script>
    const ModalForm = {
        props: ['email', 'password'],
        template: `
            <form action="">
                <div class="modal-card" style="width: auto">
                    <header class="modal-card-head">
                        <p class="modal-card-title">Login</p>
                    </header>
                    <section class="modal-card-body">
                        <b-field label="Email">
                            <b-input
                                type="email"
                                :value="email"
                                placeholder="Your email"
                                required>
                            </b-input>
                        </b-field>

                        <b-field label="Password">
                            <b-input
                                type="password"
                                :value="password"
                                password-reveal
                                placeholder="Your password"
                                required>
                            </b-input>
                        </b-field>

                        <b-checkbox>Remember me</b-checkbox>
                    </section>
                    <footer class="modal-card-foot">
                        <button class="button" type="button" @click="$parent.close()">Close</button>
                        <button class="button is-primary">Login</button>
                    </footer>
                </div>
            </form>
        `
    }

    export default {
        components: {
            ModalForm
        },
        data() {
            return {
                isComponentModalActive: false,
                formProps: {
                    email: 'evan@you.com',
                    password: 'testing'
                }
            }
        }
    }
</script>

Programmatic

Syntax:

// From inside Vue instance
this.$modal.open(props)

// From outside Vue instance
import { ModalProgrammatic } from 'buefy/dist/components/modal'
ModalProgrammatic.open(props)
<template>
    <section>
        <button class="button is-primary is-medium"
            @click="imageModal()">
            Launch image modal (HTML)
        </button>
        <button class="button is-primary is-medium"
            @click="cardModal()">
            Launch card modal (Component)
        </button>
    </section>
</template>

<script>
    const ModalForm = {
        props: ['email', 'password'],
        template: `
            <form action="">
                <div class="modal-card" style="width: auto">
                    <header class="modal-card-head">
                        <p class="modal-card-title">Login</p>
                    </header>
                    <section class="modal-card-body">
                        <b-field label="Email">
                            <b-input
                                type="email"
                                :value="email"
                                placeholder="Your email"
                                required>
                            </b-input>
                        </b-field>

                        <b-field label="Password">
                            <b-input
                                type="password"
                                :value="password"
                                password-reveal
                                placeholder="Your password"
                                required>
                            </b-input>
                        </b-field>

                        <b-checkbox>Remember me</b-checkbox>
                    </section>
                    <footer class="modal-card-foot">
                        <button class="button" type="button" @click="$parent.close()">Close</button>
                        <button class="button is-primary">Login</button>
                    </footer>
                </div>
            </form>
        `
    }

    export default {
        methods: {
            imageModal() {
                this.$modal.open(
                    `<p class="image is-4by3">
                        <img src="https://buefy.github.io/static/img/placeholder-1280x960.png">
                    </p>`
                )
            },
            cardModal() {
                this.$modal.open({
                    parent: this,
                    component: ModalForm,
                    hasModalCard: true
                })
            }
        }
    }
</script>

API

Name
Description
Type
Values
Default
activeWhether modal is active or not, use the .sync modifier to make it two-way binding Boolean false
componentComponent to be injected, used to open a component modal programmatically. Close modal within the component by emitting a 'close' event — this.$emit('close') Object, Function
parentParent component of the modal, required if using component Vue
propsProps to be binded to the injected component Object
eventsEvents to be binded to the injected component Object
contentHTML content String
widthWidth of the Modal, maximum of 960 Number, String 960
has-modal-cardIf your modal content has a .modal-card as root, add this prop or the card might break on mobile Boolean false
animationCustom animation (transition name) String zoom-out
canCancelCan close Modal by clicking 'X', pressing escape or clicking outside Boolean, Array escape, x, outside['escape', 'x', 'outside']
onCancelCallback function to call after user canceled (clicked 'X' / pressed escape / clicked outside) Function
scrollclip to remove the <body> scrollbar, keep to have a non scrollable scrollbar to avoid shifting background, but will set <body> to position fixed, might break some layouts String clip, keepclip

This page is open source. Noticed a typo or something's unclear?

Improve this page on GitHub