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);

css

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>
            <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 isModalActive = ref(false);

css

Programmatically

Show code

HTML

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

    <o-button
        label="Open modal (Component)"
        size="medium"
        variant="primary"
        @click="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() {
    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],
        destroyOnHide: true,
    });
}

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

css

Programmatically (with promises and async/await)

Show code

HTML

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

JS

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

const oruga = useOruga();

const promptModal = async () => {
    const instance = oruga.modal.open({
        component: ModalForm,
        props: {
            title: "Ship sprockets?",
            message: "Do you really want me to ship the selected sprockets?",
        },
        trapFocus: true,
        destroyOnHide: true,
    });
    // Note utilizing the promise requires Promise be supported by the browser
    // If you are running Vue 2 on IE 11 this will not be the case unless you
    // add a polyfill in your build.
    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 () => {
    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,
        destroyOnHide: 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,
    });
};

css

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.	string	dialog, alertdialog	From config: modal: {   ariaRole: undefined }
autoFocus	Automatically focus modal when active	boolean	-	From config: modal: {   autoFocus: true }
cancelable	Is Modal cancleable by clicking 'X', pressing escape or clicking outside	string[] | boolean	escape, x, outside, button, true, false	From config: modal: {   cancelable: ["escape","x","outside","button"] }
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, used to open a component modal programmatically. Close modal within the component by emitting a 'close' event — emits('close')	Component	-
container	DOM element where the modal component will be created on (for programmatic usage)	string | HTMLElement	-	From config: modal: {   container: "body" }
content	Text content, unnecessary when default slot is used	string	-
destroyOnHide	Destroy modal on hide - default true for programmatic usage	boolean	-	From config: modal: {   destroyOnHide: false }
events	Events to be binded to the injected component	object	-	{}
fullScreen	Display modal as full screen	boolean	-	false
mobileBreakpoint	Mobile breakpoint as max-width value	string	-	From config: modal: {   mobileBreakpoint: undefined }
onCancel	Callback function to call after user canceled (clicked 'X' / pressed escape / clicked outside)	() => void	-	Default function (see source code)
onClose	Callback function to call after close (programmatically close or user canceled)	() => void	-	Default function (see source code)
override	Override existing theme classes completely	boolean	-
props	Props to be binded to the injected component	object	-
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.	string	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|string|object	-	From config: modal: {   teleport: false }
trapFocus	Trap focus inside the modal	boolean	-	From config: modal: {   trapFocus: true }
width	Width of the Modal	string|number	-	From config: modal: {   width: 960 }

Events

Event name	Properties	Description
update:active	value boolean - updated active prop	active prop two-way binding
close	value any - 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 Base

SASS Variable	Default
$modal-content-background-color	$white
$modal-content-border-radius	$base-border-radius
$modal-overlay-background-color	hsla(0, 0%, 4%, 0.86)
$modal-close-border-radius	$base-rounded-border-radius
$modal-close-right	20px
$modal-close-top	20px
$modal-close-size	32px
$modal-close-color	$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 ➜ Oruga Full

SASS Variable	Default
$modal-content-background-color	$white
$modal-content-border-radius	$base-border-radius
$modal-overlay-background-color	hsla(0, 0%, 4%, 0.86)
$modal-close-border-radius	$base-rounded-border-radius
$modal-close-right	20px
$modal-close-top	20px
$modal-close-size	32px
$modal-close-color	$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.