Modal

Classic modal overlay to include any content you may need

Examples

Base

Show code

HTML

<section class="odocs-spaced">
    <o-button
        label="Open modal"
        size="medium"
        variant="primary"
        @click="isImageModalActive = true" />

    <o-button
        label="Open modal (clip scroll)"
        size="medium"
        variant="primary"
        @click="isCardModalActive = true" />

    <o-modal v-model:active="isImageModalActive">
        <p style="text-align: center">
            <img
                style="background-color: white"
                src="https://avatars2.githubusercontent.com/u/66300512?s=200&v=4" />
        </p>
    </o-modal>

    <o-modal v-model:active="isCardModalActive" :width="640" scroll="clip">
        <div style="padding: 10px; background-color: white">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Etiam sodales leo nec convallis rutrum. Vivamus pharetra
                molestie arcu at dictum. Nulla faucibus leo eget enim
                egestas, in tempus justo venenatis. Duis dictum suscipit
                erat, a dapibus eros lobortis ac. Praesent tempor rhoncus
                convallis. Nullam in ipsum convallis, rutrum elit eget,
                dictum ipsum. Nunc sagittis aliquet massa. Etiam lacus
                sapien, eleifend non eros quis, finibus ornare nisl. Ut
                laoreet sit amet lacus non dignissim. Sed convallis mattis
                enim, sed interdum risus molestie ut. Praesent vel ex
                hendrerit, cursus lectus a, blandit felis. Nam luctus orci
                nec varius commodo.
            </p>
            <p>
                Sed vulputate metus purus, ut egestas erat congue et. Donec
                tellus orci, malesuada eget dolor sed, pellentesque bibendum
                nunc. In eu egestas diam. Integer sed congue massa. Sed a
                urna quam. Morbi vulputate dolor eleifend ligula lobortis
                venenatis. Aenean pellentesque risus sit amet faucibus
                molestie. Aliquam eu lorem aliquet, aliquam nulla in,
                vestibulum lorem. Donec mollis mi at sollicitudin tristique.
                Nullam id nibh pulvinar, dignissim nisl id, gravida risus.
                Nulla arcu elit, scelerisque in sollicitudin et, laoreet et
                metus. Aenean placerat turpis nec tincidunt tempus.
            </p>
        </div>
    </o-modal>
</section>

JS

import { ref } from "vue";

const isImageModalActive = ref(false);
const isCardModalActive = ref(false);

Component Prop

Show code

HTML

<section class="odocs-spaced">
    <o-button
        label="Open modal"
        size="medium"
        variant="primary"
        @click="isModalActive = true" />

    <o-modal
        v-model:active="isModalActive"
        :component="ModalForm"
        :props="{
            title: 'Ship sprockets?',
            message:
                'Do you really want me to ship the selected sprockets?',
        }" />
</section>

JS

import { ref } from "vue";
import ModalForm from "./_modal-form-async.vue";

const isModalActive = ref(false);

Teleport

Show code

HTML

<section class="odocs-spaced">
    <o-button
        label="Open modal"
        size="medium"
        variant="primary"
        @click="isModalActive = true" />

    <o-modal v-model:active="isModalActive" teleport>
        <div style="padding: 10px; background-color: white">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Etiam sodales leo nec convallis rutrum. Vivamus pharetra
                molestie arcu at dictum. Nulla faucibus leo eget enim
                egestas, in tempus justo venenatis. Duis dictum suscipit
                erat, a dapibus eros lobortis ac. Praesent tempor rhoncus
                convallis. Nullam in ipsum convallis, rutrum elit eget,
                dictum ipsum. Nunc sagittis aliquet massa. Etiam lacus
                sapien, eleifend non eros quis, finibus ornare nisl. Ut
                laoreet sit amet lacus non dignissim. Sed convallis mattis
                enim, sed interdum risus molestie ut. Praesent vel ex
                hendrerit, cursus lectus a, blandit felis. Nam luctus orci
                nec varius commodo.
            </p>
        </div>
    </o-modal>
</section>

JS

import { ref } from "vue";

const isModalActive = ref(false);

Programmatically

Show code

HTML

<section class="odocs-spaced">
    <o-button
        label="Open modal (HTML)"
        size="medium"
        variant="primary"
        @click.prevent="imageModal()" />

    <o-button
        label="Open modal (Component)"
        size="medium"
        variant="primary"
        @click.prevent="cardModal()" />
</section>

JS

import { h } from "vue";
import { useOruga } from "@oruga-ui/oruga-next";
import ModalForm from "./_modal-form.vue";

const oruga = useOruga();

function imageModal(): void {
    const vnode = h("p", { style: { "text-align": "center" } }, [
        h("img", {
            src: "https://avatars2.githubusercontent.com/u/66300512?s=200&v=4",
        }),
    ]);

    oruga.modal.open({
        content: [vnode],
    });
}

function cardModal(): void {
    oruga.modal.open({
        component: ModalForm,
        trapFocus: true,
        cancelable: false,
    });
}

Programmatically (with promises and async/await)

Show code

HTML

<section class="odocs-spaced">
    <o-button
        label="Open prompt"
        size="medium"
        variant="primary"
        @click.prevent="promptModal()" />
    <o-button
        label="Open prompt (closeAll timeout)"
        size="medium"
        variant="primary"
        @click.prevent="promptModalCloseAll()" />
</section>

JS

import { useOruga } from "@oruga-ui/oruga-next";
import ModalForm from "./_modal-form-async.vue";

const oruga = useOruga();

const promptModal = async (): Promise<void> => {
    const instance = oruga.modal.open({
        component: ModalForm,
        props: {
            title: "Ship sprockets?",
            message: "Do you really want me to ship the selected sprockets?",
        },
        trapFocus: true,
    });

    // wait until the modal got closed
    const result = await instance.promise;

    oruga.notification.open({
        duration: 5000,
        message: "Modal dialog returned " + JSON.stringify(result),
        variant: "info",
        position: "top",
        closable: true,
    });
};

const promptModalCloseAll = async (): Promise<void> => {
    const instance = oruga.modal.open({
        component: ModalForm,
        props: {
            title: "Close All test",
            message:
                "There is a 3 second timeout that will close all programmatic modals",
        },
        trapFocus: true,
    });

    setTimeout(() => oruga.modal.closeAll({ action: "closeAll" }), 3 * 1000);

    // wait until the modal got closed
    const result = await instance.promise;

    oruga.notification.open({
        duration: 5000,
        message: "Modal dialog returned " + JSON.stringify(result),
        variant: "info",
        position: "top",
        closable: true,
    });
};

Class props

'Classes applied to the element'

Modal component

Classic modal overlay to include any content you may need

<o-modal></o-modal>

Props

Prop name	Description	Type	Values	Default
active	Whether modal is active or not, use v-model:active to make it two-way binding	boolean	-	false
animation	Custom animation (transition name)	string	-	From config: modal: {   animation: "zoom-out" }
ariaLabel	Accessibility aria-label to be passed to the div wrapper element	string	-	From config: modal: {   ariaLabel: undefined }
ariaRole	Role attribute to be passed to the div wrapper for better accessibility.	"alertdialog" | "dialog"	dialog, alertdialog	From config: modal: {   ariaRole: "dialog" }
autoFocus	Automatically focus modal when active	boolean	-	From config: modal: {   autoFocus: true }
cancelable	Is Modal cancleable by clicking 'X', pressing escape or clicking outside	boolean | string[]	escape, x, outside, button, true, false	From config: modal: {   cancelable: ["escape","x","outside"] }
closeIcon	Close icon name	string	-	From config: modal: {   closeIcon: "close" }
closeIconSize	Size of close icon	string	small, medium, large	From config: modal: {   closeIconSize: "medium" }
component	Component to be injected. Close the component by emitting a 'close' event — $emit('close')	Component	-
content	Text content, unnecessary when default slot is used	string	-
events	Events to be binded to the injected component	{}	-
fullScreen	Display modal as full screen	boolean	-	false
mobileBreakpoint	Mobile breakpoint as max-width value	string	-	From config: modal: {   mobileBreakpoint: undefined }
overlay	Show an overlay	boolean	-	From config: modal: {   overlay: true }
override	Override existing theme classes completely	boolean	-
props	Props to be binded to the injected component	any	-
scroll	Use 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.	"clip" | "keep"	keep, clip	From config: modal: {   scroll: "keep" }
teleport	Append the component to another part of the DOM. Set true to append the component to the body. In addition, any CSS selector string or an actual DOM node can be used.	boolean | object | string	-	From config: modal: {   teleport: false }
trapFocus	Trap focus inside the modal	boolean	-	From config: modal: {   trapFocus: true }
width	Width of the Modal	number | string	-	From config: modal: {   width: 960 }

Events

Event name	Properties	Description
update:active	value boolean - updated active prop	active prop two-way binding
close	value unknown - close event data	on component close event

Slots

Name	Description	Bindings
default	Modal default content, default is content prop	close (...args): void - function to close the component

Sass variables

Current theme ➜ Oruga

SASS Variable	Default
$modal-content-background-color	var(--#{$prefix}white)
$modal-content-border-radius	var(--#{$prefix}base-border-radius)
$modal-overlay-background-color	hsla(0, 0%, 4%, 0.86)
$modal-close-border-radius	var( --#{$prefix}base-border-radius-rounded)
$modal-close-right	20px
$modal-close-top	20px
$modal-close-size	32px
$modal-close-color	var(--#{$prefix}white)
$modal-content-fullscreen-background-color	#f5f5f5
$modal-content-max-height	calc(100vh - 160px)
$modal-content-margin	0 auto
$modal-zindex	40

See ➜ 📄 Full scss file

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

The theme does not have any custom variables for this component.