The Modal
component allows you to create modal windows.
You can create a Modal
using the static method make()
.
make(
Closure|string $title = '',
protected Closure|Renderable|string $content = '',
protected Closure|Renderable|ActionButtonContract|string $outer = '',
protected Closure|string|null $asyncUrl = null,
iterable $components = [],
)
make(
Closure|string $title = '',
protected Closure|Renderable|string $content = '',
protected Closure|Renderable|ActionButtonContract|string $outer = '',
protected Closure|string|null $asyncUrl = null,
iterable $components = [],
)
make(
Closure|string $title = '',
protected Closure|Renderable|string $content = '',
protected Closure|Renderable|ActionButtonContract|string $outer = '',
protected Closure|string|null $asyncUrl = null,
iterable $components = [],
)
make(
Closure|string $title = '',
protected Closure|Renderable|string $content = '',
protected Closure|Renderable|ActionButtonContract|string $outer = '',
protected Closure|string|null $asyncUrl = null,
iterable $components = [],
)
make(
Closure|string $title = '',
protected Closure|Renderable|string $content = '',
protected Closure|Renderable|ActionButtonContract|string $outer = '',
protected Closure|string|null $asyncUrl = null,
iterable $components = [],
)
$title
- title of the modal window,
$content
- content of the modal window,
$outer
- external block with the trigger for the window,
$asyncUrl
- URL for asynchronous content,
$components
- components for the modal window.
use MoonShine\UI\Components\Modal;Modal::make( title: 'Confirm', content: 'Content')
use MoonShine\UI\Components\Modal;
Modal::make(
title: 'Confirm',
content: 'Content'
)
use MoonShine\UI\Components\Modal;Modal::make( title: 'Confirm', content: 'Content')
use MoonShine\UI\Components\Modal;
Modal::make(
title: 'Confirm',
content: 'Content'
)
use MoonShine\UI\Components\Modal;Modal::make( title: 'Confirm', content: 'Content')
<x-moonshine::modal title="Title"> <div> Content... </div> <x-slot name="outerHtml"> <x-moonshine::link-button @click.prevent="toggleModal"> Open modal </x-moonshine::link-button> </x-slot></x-moonshine::modal>
<x-moonshine::modal title="Title">
<div>
Content...
</div>
<x-slot name="outerHtml">
<x-moonshine::link-button @click.prevent="toggleModal">
Open modal
</x-moonshine::link-button>
</x-slot>
</x-moonshine::modal>
<x-moonshine::modal title="Title"> <div> Content... </div> <x-slot name="outerHtml"> <x-moonshine::link-button @click.prevent="toggleModal"> Open modal </x-moonshine::link-button> </x-slot></x-moonshine::modal>
<x-moonshine::modal title="Title">
<div>
Content...
</div>
<x-slot name="outerHtml">
<x-moonshine::link-button @click.prevent="toggleModal">
Open modal
</x-moonshine::link-button>
</x-slot>
</x-moonshine::modal>
<x-moonshine::modal title="Title"> <div> Content... </div> <x-slot name="outerHtml"> <x-moonshine::link-button @click.prevent="toggleModal"> Open modal </x-moonshine::link-button> </x-slot></x-moonshine::modal>
You can open or close a modal window without using the component through javascript
events. To access the events, you must set a unique name for the modal window using the name()
method.
use MoonShine\UI\Components\ActionButton;
use MoonShine\UI\Components\Modal;
protected function components(): iterable
{
return [
Modal::make(
'Title',
'Content',
)
->name('my-modal'),
];
}
use MoonShine\UI\Components\ActionButton;
use MoonShine\UI\Components\Modal;
// ...
protected function components(): iterable
{
return [
Modal::make(
'Title',
'Content',
)
->name('my-modal'),
];
}
// ...
use MoonShine\UI\Components\ActionButton;
use MoonShine\UI\Components\Modal;
// ...
protected function components(): iterable
{
return [
Modal::make(
'Title',
'Content',
)
->name('my-modal'),
];
}
// ...
use MoonShine\UI\Components\ActionButton;
use MoonShine\UI\Components\Modal;
// ...
protected function components(): iterable
{
return [
Modal::make(
'Title',
'Content',
)
->name('my-modal'),
];
}
// ...
use MoonShine\UI\Components\ActionButton;
use MoonShine\UI\Components\Modal;
// ...
protected function components(): iterable
{
return [
Modal::make(
'Title',
'Content',
)
->name('my-modal'),
];
}
// ...
Triggering an Event via ActionButton
The modal window's event can be triggered using the ActionButton
component.
Modal::make(
'Title',
'Content',
)
->name('my-modal'),
ActionButton::make('Show Modal')
->toggleModal('my-modal')
ActionButton::make(
'Show Modal',
'/endpoint'
)
->async(events: [AlpineJs::event(JsEvent::MODAL_TOGGLED, 'my-modal')])
Modal::make(
'Title',
'Content',
)
->name('my-modal'),
ActionButton::make('Show Modal')
->toggleModal('my-modal')
// or asynchronously
ActionButton::make(
'Show Modal',
'/endpoint'
)
->async(events: [AlpineJs::event(JsEvent::MODAL_TOGGLED, 'my-modal')])
Modal::make(
'Title',
'Content',
)
->name('my-modal'),
ActionButton::make('Show Modal')
->toggleModal('my-modal')
// or asynchronously
ActionButton::make(
'Show Modal',
'/endpoint'
)
->async(events: [AlpineJs::event(JsEvent::MODAL_TOGGLED, 'my-modal')])
Modal::make(
'Title',
'Content',
)
->name('my-modal'),
ActionButton::make('Show Modal')
->toggleModal('my-modal')
// or asynchronously
ActionButton::make(
'Show Modal',
'/endpoint'
)
->async(events: [AlpineJs::event(JsEvent::MODAL_TOGGLED, 'my-modal')])
Modal::make(
'Title',
'Content',
)
->name('my-modal'),
ActionButton::make('Show Modal')
->toggleModal('my-modal')
// or asynchronously
ActionButton::make(
'Show Modal',
'/endpoint'
)
->async(events: [AlpineJs::event(JsEvent::MODAL_TOGGLED, 'my-modal')])
Triggering an Event Using Native Methods
Events can be triggered using native javascript methods:
document.addEventListener("DOMContentLoaded", () => {
this.dispatchEvent(new CustomEvent("modal_toggled:my-modal"))
})
document.addEventListener("DOMContentLoaded", () => {
this.dispatchEvent(new CustomEvent("modal_toggled:my-modal"))
})
document.addEventListener("DOMContentLoaded", () => {
this.dispatchEvent(new CustomEvent("modal_toggled:my-modal"))
})
document.addEventListener("DOMContentLoaded", () => {
this.dispatchEvent(new CustomEvent("modal_toggled:my-modal"))
})
document.addEventListener("DOMContentLoaded", () => {
this.dispatchEvent(new CustomEvent("modal_toggled:my-modal"))
})
Triggering an Event with Alpine.js Method
Or using the magical method $dispatch()
from *alpine.js
:
this.$dispatch('modal_toggled:my-modal')
this.$dispatch('modal_toggled:my-modal')
this.$dispatch('modal_toggled:my-modal')
this.$dispatch('modal_toggled:my-modal')
this.$dispatch('modal_toggled:my-modal')
Triggering an Event with Global MoonShine Class
MoonShine.ui.toggleModal('my-modal')
MoonShine.ui.toggleModal('my-modal')
MoonShine.ui.toggleModal('my-modal')
MoonShine.ui.toggleModal('my-modal')
MoonShine.ui.toggleModal('my-modal')
More detailed information can be found in the official Alpine.js documentation in the sections Events and $dispatch.
You can also add events when opening/closing the modal window using the toggleEvents
method.
toggleEvents(array $events, bool $onlyOpening = false, $onlyClosing = false)
toggleEvents(array $events, bool $onlyOpening = false, $onlyClosing = false)
toggleEvents(array $events, bool $onlyOpening = false, $onlyClosing = false)
toggleEvents(array $events, bool $onlyOpening = false, $onlyClosing = false)
toggleEvents(array $events, bool $onlyOpening = false, $onlyClosing = false)
ActionButton::make('Open Modal')->toggleModal('my-modal'),
Modal::make('My Modal', asyncUrl: '/')
->name('my-modal')
->toggleEvents([
AlpineJs::event(JsEvent::TOAST, params: ['text' => 'Hello'])
], onlyOpening: false, onlyClosing: true),
ActionButton::make('Open Modal')->toggleModal('my-modal'),
Modal::make('My Modal', asyncUrl: '/')
->name('my-modal')
->toggleEvents([
AlpineJs::event(JsEvent::TOAST, params: ['text' => 'Hello'])
], onlyOpening: false, onlyClosing: true),
ActionButton::make('Open Modal')->toggleModal('my-modal'),
Modal::make('My Modal', asyncUrl: '/')
->name('my-modal')
->toggleEvents([
AlpineJs::event(JsEvent::TOAST, params: ['text' => 'Hello'])
], onlyOpening: false, onlyClosing: true),
ActionButton::make('Open Modal')->toggleModal('my-modal'),
Modal::make('My Modal', asyncUrl: '/')
->name('my-modal')
->toggleEvents([
AlpineJs::event(JsEvent::TOAST, params: ['text' => 'Hello'])
], onlyOpening: false, onlyClosing: true),
ActionButton::make('Open Modal')->toggleModal('my-modal'),
Modal::make('My Modal', asyncUrl: '/')
->name('my-modal')
->toggleEvents([
AlpineJs::event(JsEvent::TOAST, params: ['text' => 'Hello'])
], onlyOpening: false, onlyClosing: true),
The parameters onlyOpening
and onlyClosing
allow you to configure whether events will fire on opening and closing. By default, both parameters are set to TRUE
, which means the event list will be triggered on both opening and closing of the modal.
The open()
method allows you to open the modal window when the page loads.
open(Closure|bool|null $condition = null)
open(Closure|bool|null $condition = null)
open(Closure|bool|null $condition = null)
open(Closure|bool|null $condition = null)
open(Closure|bool|null $condition = null)
Modal::make('Title', 'Content...', view('path'))
->open(),
Modal::make('Title', 'Content...', view('path'))
->open(),
Modal::make('Title', 'Content...', view('path'))
->open(),
Modal::make('Title', 'Content...', view('path'))
->open(),
Modal::make('Title', 'Content...', view('path'))
->open(),
By default, the modal window will remain closed when the page loads.
By default, the modal window closes when clicking outside the window area. The closeOutside()
method allows you to override this behavior.
Modal::make('Title', 'Content...', ActionButton::make('Show Modal', '#'))
->closeOutside(false),
Modal::make('Title', 'Content...', ActionButton::make('Show Modal', '#'))
->closeOutside(false),
Modal::make('Title', 'Content...', ActionButton::make('Show Modal', '#'))
->closeOutside(false),
Modal::make('Title', 'Content...', ActionButton::make('Show Modal', '#'))
->closeOutside(false),
Modal::make('Title', 'Content...', ActionButton::make('Show Modal', '#'))
->closeOutside(false),
By default, modal windows close after a successful request (for example, when submitting a form). The autoClose()
method allows you to control this behavior.
autoClose(Closure|bool|null $autoClose = null)
autoClose(Closure|bool|null $autoClose = null)
autoClose(Closure|bool|null $autoClose = null)
autoClose(Closure|bool|null $autoClose = null)
autoClose(Closure|bool|null $autoClose = null)
Modal::make(
'Demo Modal',
static fn() => FormBuilder::make(route('alert.post'))
->fields([
Text::make('Text'),
])
->submit('Submit', ['class' => 'btn-primary'])
->async(),
)
->name('demo-modal')
->autoClose(false),
Modal::make(
'Demo Modal',
static fn() => FormBuilder::make(route('alert.post'))
->fields([
Text::make('Text'),
])
->submit('Submit', ['class' => 'btn-primary'])
->async(),
)
->name('demo-modal')
->autoClose(false),
Modal::make(
'Demo Modal',
static fn() => FormBuilder::make(route('alert.post'))
->fields([
Text::make('Text'),
])
->submit('Submit', ['class' => 'btn-primary'])
->async(),
)
->name('demo-modal')
->autoClose(false),
Modal::make(
'Demo Modal',
static fn() => FormBuilder::make(route('alert.post'))
->fields([
Text::make('Text'),
])
->submit('Submit', ['class' => 'btn-primary'])
->async(),
)
->name('demo-modal')
->autoClose(false),
Modal::make(
'Demo Modal',
static fn() => FormBuilder::make(route('alert.post'))
->fields([
Text::make('Text'),
])
->submit('Submit', ['class' => 'btn-primary'])
->async(),
)
->name('demo-modal')
->autoClose(false),
wide
The wide()
method of the Modal component sets the maximum width of the modal window.
wide(Closure|bool|null $condition = null)
wide(Closure|bool|null $condition = null)
wide(Closure|bool|null $condition = null)
wide(Closure|bool|null $condition = null)
wide(Closure|bool|null $condition = null)
Modal::make('Title', 'Content...', ActionButton::make('Show Modal', '#'))
->wide(),
Modal::make('Title', 'Content...', ActionButton::make('Show Modal', '#'))
->wide(),
Modal::make('Title', 'Content...', ActionButton::make('Show Modal', '#'))
->wide(),
Modal::make('Title', 'Content...', ActionButton::make('Show Modal', '#'))
->wide(),
Modal::make('Title', 'Content...', ActionButton::make('Show Modal', '#'))
->wide(),
auto
The auto()
method of the Modal component sets the width of the modal window based on the content.
auto(Closure|bool|null $condition = null)
auto(Closure|bool|null $condition = null)
auto(Closure|bool|null $condition = null)
auto(Closure|bool|null $condition = null)
auto(Closure|bool|null $condition = null)
Modal::make('Title', 'Content...', ActionButton::make('Show Modal', '#'))
->auto(),
Modal::make('Title', 'Content...', ActionButton::make('Show Modal', '#'))
->auto(),
Modal::make('Title', 'Content...', ActionButton::make('Show Modal', '#'))
->auto(),
Modal::make('Title', 'Content...', ActionButton::make('Show Modal', '#'))
->auto(),
Modal::make('Title', 'Content...', ActionButton::make('Show Modal', '#'))
->auto(),
Modal::make('Title', '', ActionButton::make('Show Modal', '#'), asyncUrl: '/endpoint'),
Modal::make('Title', '', ActionButton::make('Show Modal', '#'), asyncUrl: '/endpoint'),
Modal::make('Title', '', ActionButton::make('Show Modal', '#'), asyncUrl: '/endpoint'),
Modal::make('Title', '', ActionButton::make('Show Modal', '#'), asyncUrl: '/endpoint'),
Modal::make('Title', '', ActionButton::make('Show Modal', '#'), asyncUrl: '/endpoint'),
The request will be sent once, but if you need to send a request each time it opens, use the alwaysLoad
method.
Modal::make(...)
->alwaysLoad(),
Modal::make(...)
->alwaysLoad(),
Modal::make(...)
->alwaysLoad(),
Modal::make(...)
->alwaysLoad(),
Modal::make(...)
->alwaysLoad(),
The outerAttributes()
method allows you to set additional attributes for the external block $outer
.
outerAttributes(array $attributes)
outerAttributes(array $attributes)
outerAttributes(array $attributes)
outerAttributes(array $attributes)
outerAttributes(array $attributes)
Modal::make('Title', 'Content...', ActionButton::make('Show Modal', '#'))
->outerAttributes([
'class' => 'mt-2'
]),
Modal::make('Title', 'Content...', ActionButton::make('Show Modal', '#'))
->outerAttributes([
'class' => 'mt-2'
]),
Modal::make('Title', 'Content...', ActionButton::make('Show Modal', '#'))
->outerAttributes([
'class' => 'mt-2'
]),
Modal::make('Title', 'Content...', ActionButton::make('Show Modal', '#'))
->outerAttributes([
'class' => 'mt-2'
]),
Modal::make('Title', 'Content...', ActionButton::make('Show Modal', '#'))
->outerAttributes([
'class' => 'mt-2'
]),
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-button @click.prevent="toggleModal">
Open modal
</x-moonshine::link-button>
</x-slot>
</x-moonshine::modal>
<x-moonshine::modal title="Title">
<div>
Content...
</div>
<x-slot name="outerHtml">
<x-moonshine::link-button @click.prevent="toggleModal">
Open modal
</x-moonshine::link-button>
</x-slot>
</x-moonshine::modal>
<x-moonshine::modal title="Title">
<div>
Content...
</div>
<x-slot name="outerHtml">
<x-moonshine::link-button @click.prevent="toggleModal">
Open modal
</x-moonshine::link-button>
</x-slot>
</x-moonshine::modal>
<x-moonshine::modal title="Title">
<div>
Content...
</div>
<x-slot name="outerHtml">
<x-moonshine::link-button @click.prevent="toggleModal">
Open modal
</x-moonshine::link-button>
</x-slot>
</x-moonshine::modal>
<x-moonshine::modal title="Title">
<div>
Content...
</div>
<x-slot name="outerHtml">
<x-moonshine::link-button @click.prevent="toggleModal">
Open modal
</x-moonshine::link-button>
</x-slot>
</x-moonshine::modal>
The wide
parameter allows modal windows to fill the entire width.
<x-moonshine::modal wide title="Title">
<div>
Content...
</div>
<x-slot name="outerHtml">
<x-moonshine::link-button @click.prevent="toggleModal">
Open wide modal
</x-moonshine::link-button>
</x-slot>
</x-moonshine::modal>
<x-moonshine::modal wide title="Title">
<div>
Content...
</div>
<x-slot name="outerHtml">
<x-moonshine::link-button @click.prevent="toggleModal">
Open wide modal
</x-moonshine::link-button>
</x-slot>
</x-moonshine::modal>
<x-moonshine::modal wide title="Title">
<div>
Content...
</div>
<x-slot name="outerHtml">
<x-moonshine::link-button @click.prevent="toggleModal">
Open wide modal
</x-moonshine::link-button>
</x-slot>
</x-moonshine::modal>
<x-moonshine::modal wide title="Title">
<div>
Content...
</div>
<x-slot name="outerHtml">
<x-moonshine::link-button @click.prevent="toggleModal">
Open wide modal
</x-moonshine::link-button>
</x-slot>
</x-moonshine::modal>
<x-moonshine::modal wide title="Title">
<div>
Content...
</div>
<x-slot name="outerHtml">
<x-moonshine::link-button @click.prevent="toggleModal">
Open wide modal
</x-moonshine::link-button>
</x-slot>
</x-moonshine::modal>
The auto
parameter allows modal windows to take width based on content.
<x-moonshine::modal auto title="Title">
<div>
Content...
</div>
<x-slot name="outerHtml">
<x-moonshine::link-button @click.prevent="toggleModal">
Open auto modal
</x-moonshine::link-button>
</x-slot>
</x-moonshine::modal>
<x-moonshine::modal auto title="Title">
<div>
Content...
</div>
<x-slot name="outerHtml">
<x-moonshine::link-button @click.prevent="toggleModal">
Open auto modal
</x-moonshine::link-button>
</x-slot>
</x-moonshine::modal>
<x-moonshine::modal auto title="Title">
<div>
Content...
</div>
<x-slot name="outerHtml">
<x-moonshine::link-button @click.prevent="toggleModal">
Open auto modal
</x-moonshine::link-button>
</x-slot>
</x-moonshine::modal>
<x-moonshine::modal auto title="Title">
<div>
Content...
</div>
<x-slot name="outerHtml">
<x-moonshine::link-button @click.prevent="toggleModal">
Open auto modal
</x-moonshine::link-button>
</x-slot>
</x-moonshine::modal>
<x-moonshine::modal auto title="Title">
<div>
Content...
</div>
<x-slot name="outerHtml">
<x-moonshine::link-button @click.prevent="toggleModal">
Open auto modal
</x-moonshine::link-button>
</x-slot>
</x-moonshine::modal>
By default, modal windows close when clicking outside the window area. You can override this behavior using the closeOutside
parameter.
<x-moonshine::modal :closeOutside="false" title="Title">
<div>
Content...
</div>
<x-slot name="outerHtml">
<x-moonshine::link-button @click.prevent="toggleModal">
Open modal
</x-moonshine::link-button>
</x-slot>
</x-moonshine::modal>
<x-moonshine::modal :closeOutside="false" title="Title">
<div>
Content...
</div>
<x-slot name="outerHtml">
<x-moonshine::link-button @click.prevent="toggleModal">
Open modal
</x-moonshine::link-button>
</x-slot>
</x-moonshine::modal>
<x-moonshine::modal :closeOutside="false" title="Title">
<div>
Content...
</div>
<x-slot name="outerHtml">
<x-moonshine::link-button @click.prevent="toggleModal">
Open modal
</x-moonshine::link-button>
</x-slot>
</x-moonshine::modal>
<x-moonshine::modal :closeOutside="false" title="Title">
<div>
Content...
</div>
<x-slot name="outerHtml">
<x-moonshine::link-button @click.prevent="toggleModal">
Open modal
</x-moonshine::link-button>
</x-slot>
</x-moonshine::modal>
<x-moonshine::modal :closeOutside="false" title="Title">
<div>
Content...
</div>
<x-slot name="outerHtml">
<x-moonshine::link-button @click.prevent="toggleModal">
Open modal
</x-moonshine::link-button>
</x-slot>
</x-moonshine::modal>
The moonshine::modal
component allows for loading content asynchronously.
<x-moonshine::modal
async
:asyncUrl="route('async')"
title="Title"
>
<x-slot name="outerHtml">
<x-moonshine::link-button @click.prevent="toggleModal">
Open async modal
</x-moonshine::link-button>
</x-slot>
</x-moonshine::modal>
<x-moonshine::modal
async
:asyncUrl="route('async')"
title="Title"
>
<x-slot name="outerHtml">
<x-moonshine::link-button @click.prevent="toggleModal">
Open async modal
</x-moonshine::link-button>
</x-slot>
</x-moonshine::modal>
<x-moonshine::modal
async
:asyncUrl="route('async')"
title="Title"
>
<x-slot name="outerHtml">
<x-moonshine::link-button @click.prevent="toggleModal">
Open async modal
</x-moonshine::link-button>
</x-slot>
</x-moonshine::modal>
<x-moonshine::modal
async
:asyncUrl="route('async')"
title="Title"
>
<x-slot name="outerHtml">
<x-moonshine::link-button @click.prevent="toggleModal">
Open async modal
</x-moonshine::link-button>
</x-slot>
</x-moonshine::modal>
<x-moonshine::modal
async
:asyncUrl="route('async')"
title="Title"
>
<x-slot name="outerHtml">
<x-moonshine::link-button @click.prevent="toggleModal">
Open async modal
</x-moonshine::link-button>
</x-slot>
</x-moonshine::modal>