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>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
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"> 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
Modal Events
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 | -- |
1<x-modal2 ...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],