WireUI
Simple Modal
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 have a custom main element that handle the scroll, you can use the main-container attribute in your main element to block the scroll when the modal is opened
Tip: You can use global function $openModal('myModal') to open modal from your Javascript code.
Modal Events
1<x-modal
2 ...
3 x-on:open='...'
4 x-on:close='...'>
5 
6</x-modal>
Customize Default

You can publish wireui config or put in 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],