Components
Modal
Modals are overlays that require users to take action before they can continue interacting with the rest of your application.
Modal Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<!--requires alpine.js -->
<div x-data="{'show':false}">
<!--Button for triggering modal-->
<div class="flex flex-col">
<div>
<button @click.prevent="show = true" class="btn-light btn-sm">
Show Modal
</button>
<div>
</div>
<!--Button for triggering modal-->
<div>
<template x-teleport="body">
<div x-show="show" @keydown.escape.prevent.stop="show= false"
role="dialog" aria-modal="true" x-id="['modal-title']" :aria-labelledby="$id('modal-title')"
class="fixed inset-0 z-90">
<div x-show="show" x-transition.opacity class="fixed inset-0 bg-black bg-opacity-50"></div>
<!-- Modal Panel -->
<div x-show="show" x-transition @click="show= false"
class="relative h-full w-full flex items-center justify-center">
<div @click.stop x-trap.noscroll.inert="show"
class="inline-block align-bottom w-full bg-white
dark:bg-gray-700 rounded-lg text-left relative
overflow-hidden shadow-xl bg-white border overflow-y-auto
max-w-md">
<!--Close button -->
<div class="absolute top-4 right-4 text-gray-600"
@click="show=false">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0
000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293
1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0
001.414-1.414L11.414 10l1.293-1.293a1 1 0
00-1.414-1.414L10 8.586 8.707 7.293z"
clip-rule="evenodd" /></svg>
<!-- Modal content -->
</div>
<div class='flex flex-col h-64 min-h-64 p-4'>
<h2 'class='text-2xl text-gray-600 font-semibold'>
Modal Title
</h2>
<p class='mt-5'>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
</p>
</div>
<div class="form-buttons">
<button class="btn btn-xs mx-2" type="submit">
Save
</button>
<button class="btn-light btn-xs mx-2 " @click="show= false">
Cancel
</button>
</div>
</div>
</div>
</div>
</template>
</div>
</div>