Modals can be used as pop-up dialog boxes that show above the main web page. These can be tasked for any purpose, like asking for confirmation before an action, displaying more information, or displaying and handling a sub-form.

Modals are created with the <x-euikit::modal> component. This is a wrapper around your modal dialog. It requires a "name" attribute be set.

Modals support header and footer slots to aid in their design. Neither slot is required.

The header and footer slots can take icons using the lefticon and righticon attributes. The icon will be rendered with the @svg() Blade directive, so any icon pack in Blade Icons can be used. EUIKit supports Heroicons by default.

Example Modal Scaffolding

 <x-e::modal name="sample">
    <p>Any sort of content can go in here. This is in the default slot, since no slot was specified.</p>
</x-e::modal>

EUIKit uses AlpineJS to show and hide modals. Within your code, they will appear and disappear based on onclick handlers.

Showing A Modal

To show a modal, call $modals.show('name') inside a click handler. Pass the name given to the modal as the only argument to show().

Closing A Modal

Modals can be dismissed in three ways:

• Clicking on the backdrop behind the modal.
• Pressing the <ESC> key on the keyboard.
• Calling show = false in a @click handler.

Click the button below to show the modal. In addition, the <livewire:euikit-sheetimport /> component uses a modal, as seen on the form.sheet demo page.

Code

<x-e::button type="info" onclick="$modals.show('demo')" value="Show Modal"/>

<x-e::modal name="demo">
    <x-slot:header>
        EUIKit example modal
    </x-slot:header>
    <p>This is a demonstration of modals in EUIKit.</p>
    <x-slot:footer>
        <x-e::button type="success" @click="show = false" value="Dismiss" />
    </x-slot:footer>
</x-e::modal>