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.

trap-focus prop could be useful in this case.

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

        <b-modal :active.sync="isComponentModalActive"
                 has-modal-card
                 trap-focus
                 aria-role="dialog"
                 aria-modal>
            <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.$buefy.modal.open(props)

// From outside Vue instance
import { ModalProgrammatic as Modal } from 'buefy'
Modal.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.$buefy.modal.open(
                    `<p class="image is-4by3">
                        <img src="https://buefy.org/static/img/placeholder-1280x960.png">
                    </p>`
                )
            },
            cardModal() {
                this.$buefy.modal.open({
                    parent: this,
                    component: ModalForm,
                    hasModalCard: true,
                    customClass: 'custom-class custom-class-2',
                    trapFocus: true
                })
            }
        }
    }
</script>

# Full Screen

New! 0.7.8

Add the full-screen prop to cover the whole page.

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

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

<script>
    const ModalForm = {
        props: ['email', 'password'],
        template: `
            <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>
        `
    }

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

# API

Name	Description	Type	Values	Default
`active`	Whether modal is active or not, use the `.sync` modifier to make it two-way binding	Boolean	—	`false`
`component`	Component 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	—	—
`parent`	Parent component of the modal, required if using `component`	Vue	—	—
`props`	Props to be binded to the injected component	Object	—	—
`events`	Events to be binded to the injected component	Object	—	—
`content`	HTML content	String	—	—
`width`	Width of the Modal	Number, String	—	`960`
`full-screen`	Display modal as full screen	Boolean	—	`false`
`has-modal-card`	If your modal content has a `.modal-card` as root, add this prop or the card might break on mobile	Boolean	—	`false`
`animation`	Custom animation (transition name)	String	—	`zoom-out`
`can-cancel`	Can close Modal by clicking 'X', pressing escape or clicking outside	Boolean, Array	`escape`, `x`, `outside`	`['escape', 'x', 'outside']`
`on-cancel`	Callback function to call after user canceled (clicked 'X' / pressed escape / clicked outside)	Function	—	—
`scroll`	`clip` 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`, `keep`	`clip`
`trap-focus`	Trap focus inside the modal.	Boolean	—	`false`
`custom-class`	CSS classes to be applied on modal	String	—	—
`aria-role`	Role attribute to be passed to modal container for better accessibility.	String	`dialog`, `alertdialog`	—
`aria-modal`	Improve accessiblity when enabled.	Boolean	—	`false`

Name	Description	Parameters
`close`	Triggers when user closed/canceled or called programmatically from the injected component	—

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

Improve this page on GitHub