V1 - WireUI Docs

# Simple Modal
# Blur Background

 1<x-modal wire:model.defer="simpleModal">
 2    <x-card title="Consent Terms">
 3        <p class="text-gray-600">
 4            Lorem Ipsum...
 5        </p>
 6 
 7        <x-slot name="footer">
 8            <div class="flex justify-end gap-x-4">
 9                <x-button flat label="Cancel" x-on:click="close" />
10                <x-button primary label="I Agree" />
11            </div>
12        </x-slot>
13    </x-card>
14</x-modal>

Blur Background

1<x-modal blur wire:model.defer="blurModal">
2    ...
3</x-modal>

Tip: If your project has a custom main element that handles the scroll, you can use the main-container attribute in your main element to block the scroll when the modal is opened

Modal Card

 1<x-modal.card title="Edit Customer" blur wire:model.defer="cardModal">
 2    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
 3        <x-input label="Name" placeholder="Your full name" />
 4        <x-input label="Phone" placeholder="USA phone" />
 5 
 6        <div class="col-span-1 sm:col-span-2">
 7            <x-input label="Email" placeholder="[email protected]" />
 8        </div>
 9 
10        <div class="col-span-1 sm:col-span-2 cursor-pointer bg-gray-100 rounded-xl shadow-md h-72 flex items-center justify-center">
11            <div class="flex flex-col items-center justify-center">
12                <x-icon name="cloud-upload" class="w-16 h-16 text-blue-600" />
13                <p class="text-blue-600">Click or drop files here</p>
14            </div>
15        </div>
16    </div>
17 
18    <x-slot name="footer">
19        <div class="flex justify-between gap-x-4">
20            <x-button flat negative label="Delete" wire:click="delete" />
21 
22            <div class="flex">
23                <x-button flat label="Cancel" x-on:click="close" />
24                <x-button primary label="Save" wire:click="save" />
25            </div>
26        </div>
27    </x-slot>
28</x-modal.card>

Tip: You can use the global function $openModal('myModal') to open modal from your JavaScript code.

Modal Options

Options

Prop	Required	Default	Type	Available
name	false	none	string	*
z-index	false	z-50	string	all z-index
max-width	false	2xl	string	sm\|md\|lg\|xl\|2xl\|3xl\|4xl\|5xl\|6xl
spacing	false	p-4	string	all paddings
align	false	start	string	start\|center\|end
blur	false	none	string	sm\|md\|lg\|xl\|2xl\|3xl
show	false	none	boolean	true\|false

Modal Card Options

The modal card options extends all modal and card options

Options

Prop	Required	Default	Type
squared	false	false	boolean
fullscreen	false	false	boolean
hide-close	false	false	boolean	--

Modal Events

1<x-modal
2    ...
3    x-on:open='...'
4    x-on:close='...'>
5 
6</x-modal>

Customize Default

You can publish the WireUI config or put in the .env file your modal preferences

1'modal' => [
2    'zIndex'   => env('WIREUI_MODAL_Z_INDEX', 'z-50'),
3    'maxWidth' => env('WIREUI_MODAL_MAX_WIDTH', '2xl'),
4    'spacing'  => env('WIREUI_MODAL_SPACING', 'p-4'),
5    'align'    => env('WIREUI_MODAL_ALIGN', 'start'),
6    'blur'     => env('WIREUI_MODAL_BLUR', false),
7],