Modal

You're browsing the documentation for an old version of MoonShine. Consider upgrading your project to MoonShine 2.x.

Sections
- Basics
- Wide

# Basics

The moonshine::modal component is used to create modal windows.

<x-moonshine::modal title="Title">
    <div>
        Content...
    </div>
    <x-slot name="outerHtml">
        <x-moonshine::link @click.prevent="toggleModal;">
            Open modal
        </x-moonshine::link>
    </x-slot>
</x-moonshine::modal>

<x-moonshine::modal title="Title">
    <div>
        Content...
    </div>
    <x-slot name="outerHtml">
        <x-moonshine::link @click.prevent="toggleModal;">
            Open modal
        </x-moonshine::link>
    </x-slot>
</x-moonshine::modal>

Open modal

# Wide

The wide parameter allows modal windows to take up the entire width.

<x-moonshine::modal wide title="Title">
    <div>
        Content...
    </div>
    <x-slot name="outerHtml">
        <x-moonshine::link @click.prevent="toggleModal;">
            Open wide modal
        </x-moonshine::link>
    </x-slot>
</x-moonshine::modal>

<x-moonshine::modal wide title="Title">
    <div>
        Content...
    </div>
    <x-slot name="outerHtml">
        <x-moonshine::link @click.prevent="toggleModal;">
            Open wide modal
        </x-moonshine::link>
    </x-slot>
</x-moonshine::modal>

Open wide modal