The modal component offers a versatile and user-friendly solution for your interface. It allows you to effortlessly create modals by rendering content like cards inside them, accompanied by an intuitive button for modal activation. Furthermore, the component provides the flexibility to apply various blur effects to your modals, enhancing the visual experience. Additionally, you can monitor and respond to the modal's opening and closing events, giving you fine-grained control over its behavior.
A straightforward method for utilizing the modal involves placing a card within it and incorporating a button that triggers the modal when clicked.
1<x-button label="Open" x-on:click="$openModal('simpleModal')" primary /> 2 3<x-modal name="simpleModal"> 4 <x-card title="Consent Terms"> 5 <p> 6 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 7 industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type 8 and scrambled it to make a type specimen book. It has survived not only five centuries, but also the 9 leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s10 with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop11 publishing software like Aldus PageMaker including versions of Lorem Ipsum.12 </p>13 14 <x-slot name="footer" class="flex justify-end gap-x-4">15 <x-button flat label="Cancel" x-on:click="close" />16 17 <x-button primary label="I Agree" wire:click="agree" />18 </x-slot>19 </x-card>20</x-modal>Additionally, we offer the flexibility to apply various blur effects to our modal.
1<x-button label="None" x-on:click="$openModal('blur-none')" primary /> 2 3<x-button label="SM" x-on:click="$openModal('blur-sm')" primary /> 4 5<x-button label="MD" x-on:click="$openModal('blur-md')" primary /> 6 7<x-button label="Base" x-on:click="$openModal('blur-base')" primary /> 8 9<x-button label="LG" x-on:click="$openModal('blur-lg')" primary />10 11<x-button label="XL" x-on:click="$openModal('blur-xl')" primary />12 13<x-button label="2XL" x-on:click="$openModal('blur-xxl')" primary />14 15<x-button label="3XL" x-on:click="$openModal('blur-xxxl')" primary />16 17{{-- CSS: 'backdrop-blur-none' - You can use |blur="none"| too - DEFAULT --}}18<x-modal name="blur-none" blurless>19 <x-card title="Blur SM">20 Lorem Ipsum is simply dummy text of the printing and typesetting industry.21 </x-card>22</x-modal>23 24{{-- CSS: 'backdrop-blur-sm' --}}25<x-modal name="blur-sm" blur="sm">26 <x-card title="Blur SM">27 Lorem Ipsum is simply dummy text of the printing and typesetting industry.28 </x-card>29</x-modal>30 31{{-- CSS: 'backdrop-blur' --}}32<x-modal name="blur-md" blur="md">33 <x-card title="Blur SM">34 Lorem Ipsum is simply dummy text of the printing and typesetting industry.35 </x-card>36</x-modal>37 38{{-- CSS: 'backdrop-blur-md' --}}39<x-modal name="blur-base" blur="base">40 <x-card title="Blur SM">41 Lorem Ipsum is simply dummy text of the printing and typesetting industry.42 </x-card>43</x-modal>44 45{{-- CSS: 'backdrop-blur-lg' --}}46<x-modal name="blur-lg" blur="lg">47 <x-card title="Blur SM">48 Lorem Ipsum is simply dummy text of the printing and typesetting industry.49 </x-card>50</x-modal>51 52{{-- CSS: 'backdrop-blur-xl' --}}53<x-modal name="blur-xl" blur="xl">54 <x-card title="Blur SM">55 Lorem Ipsum is simply dummy text of the printing and typesetting industry.56 </x-card>57</x-modal>58 59{{-- CSS: 'backdrop-blur-2xl' --}}60<x-modal name="blur-xxl" blur="2xl">61 <x-card title="Blur SM">62 Lorem Ipsum is simply dummy text of the printing and typesetting industry.63 </x-card>64</x-modal>65 66{{-- CSS: 'backdrop-blur-3xl' --}}67<x-modal name="blur-xxxl" blur="3xl">68 <x-card title="Blur SM">69 Lorem Ipsum is simply dummy text of the printing and typesetting industry.70 </x-card>71</x-modal>
Information!
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.
Another alternative is to configure the modal to remain persistent on the screen for the user.
1<x-button label="Open" x-on:click="$openModal('persistentModal')" primary /> 2 3<x-modal name="persistentModal" persistent> 4 <x-card title="Consent Terms"> 5 <p> 6 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 7 industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type 8 and scrambled it to make a type specimen book. It has survived not only five centuries, but also the 9 leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s10 with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop11 publishing software like Aldus PageMaker including versions of Lorem Ipsum.12 </p>13 14 <x-slot name="footer" class="flex justify-end gap-x-4">15 <x-button flat label="Cancel" x-on:click="close" />16 17 <x-button primary label="I Agree" wire:click="agree" />18 </x-slot>19 </x-card>20</x-modal>Incorporating cards within modals is a widespread practice, and we have a pre-built component designed for this purpose.
1<x-button label="Open" x-on:click="$openModal('cardModal')" primary /> 2 3<x-modal-card title="Edit Customer" name="cardModal"> 4 <div class="grid grid-cols-1 gap-4 sm:grid-cols-2"> 5 <x-input label="Name" placeholder="Your full name" /> 6 7 <x-input label="Phone" placeholder="USA phone" /> 8 9 <div class="col-span-1 sm:col-span-2">11 </div>12 13 <div14 class="flex items-center justify-center col-span-1 bg-gray-100 shadow-md cursor-pointer sm:col-span-2 dark:bg-secondary-700 rounded-xl h-64">15 <div class="flex flex-col items-center justify-center">16 <x-icon name="cloud-arrow-up" class="w-16 h-16 text-blue-600 dark:text-teal-600" />17 18 <p class="text-blue-600 dark:text-teal-600">Click or drop files here</p>19 </div>20 </div>21 </div>22 23 <x-slot name="footer" class="flex justify-between gap-x-4">24 <x-button flat negative label="Delete" x-on:click="close" />25 26 <div class="flex gap-x-4">27 <x-button flat label="Cancel" x-on:click="close" />28 29 <x-button primary label="Save" wire:click="save" />30 </div>31 </x-slot>32</x-modal-card>
Information!
You can use the global function
$openModal('myModal')
to open modal from your JavaScript code.
You can use the global function $closeModal('myModal') to close modal from your JavaScript code.
You can use the global function $closeModal('myModal') to close modal from your JavaScript code.
With the modal component, you can easily monitor both opening and closing events.
1<x-modal2 ...3 x-on:open='...'4 x-on:close='...'>5 6</x-modal>