<!-- Alpine Plugins -->
<script defer src="https://unpkg.com/@alpinejs/[email protected]/dist/cdn.min.js"></script>
<!-- Alpine Core -->
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
<style>
[x-cloak] {
display: none !important;
}
</style>
<!--<h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1>-->
<div class="h-screen flex justify-center items-center">
<div x-data="{ open: false }">
<!-- Trigger -->
<button @click="open = true" type="button" class="rounded-md bg-white px-5 py-2.5 shadow">
Open dialog
</button>
<!-- Modal -->
<template x-teleport="body">
<div x-show="open" x-on:keydown.escape.prevent.stop="open = false" role="dialog" aria-modal="true" x-id="['modal-title']" :aria-labelledby="$id('modal-title')" x-cloak class="fixed inset-0 z-10 overflow-y-auto">
<!-- Overlay -->
<div x-show="open" x-transition.opacity class="fixed inset-0 bg-black bg-opacity-50"></div>
<!-- Panel -->
<div x-show="open" x-transition @click="open = false" class="relative flex min-h-screen items-center justify-center p-4">
<div @click.stop x-trap.noscroll.inert="open" class="relative w-full max-w-2xl overflow-y-auto rounded-xl bg-white p-12 shadow-lg">
<!-- Title -->
<h2 class="text-3xl font-bold" :id="$id('modal-title')">Confirm</h2>
<!-- Content -->
<p class="mt-2 text-gray-600">Are you sure you want to learn how to create an awesome modal?</p>
<!-- Buttons -->
<div class="mt-8 flex space-x-2">
<button type="button" x-on:click="open = false" class="rounded-md border border-gray-200 bg-white px-5 py-2.5">
Confirm
</button>
<button type="button" x-on:click="open = false" class="rounded-md border border-gray-200 bg-white px-5 py-2.5">
Cancel
</button>
</div>
</div>
</div>
</div>
</template>
</div>
</div>
Content below
<!-- Alpine Plugins -->
<script defer src="https://unpkg.com/@alpinejs/[email protected]/dist/cdn.min.js"></script>
<!-- Alpine Core -->
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
<style>
[x-cloak] {
display: none !important;
}
</style>
<!--<h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1>-->
<div class="h-screen flex justify-center items-center">
<div x-data="{ open: false }">
<!-- Trigger -->
<button @click="open = true"
type="button"
class="rounded-md bg-white px-5 py-2.5 shadow"
>
Open dialog
</button>
<!-- Modal -->
<template x-teleport="body">
<div x-show="open"
x-on:keydown.escape.prevent.stop="open = false"
role="dialog"
aria-modal="true"
x-id="['modal-title']"
:aria-labelledby="$id('modal-title')"
x-cloak
class="fixed inset-0 z-10 overflow-y-auto"
>
<!-- Overlay -->
<div x-show="open"
x-transition.opacity
class="fixed inset-0 bg-black bg-opacity-50"></div>
<!-- Panel -->
<div x-show="open"
x-transition
@click="open = false"
class="relative flex min-h-screen items-center justify-center p-4">
<div @click.stop
x-trap.noscroll.inert="open"
class="relative w-full max-w-2xl overflow-y-auto rounded-xl bg-white p-12 shadow-lg"
>
<!-- Title -->
<h2 class="text-3xl font-bold" :id="$id('modal-title')">Confirm</h2>
<!-- Content -->
<p class="mt-2 text-gray-600">Are you sure you want to learn how to create an awesome modal?</p>
<!-- Buttons -->
<div class="mt-8 flex space-x-2">
<button type="button" x-on:click="open = false"
class="rounded-md border border-gray-200 bg-white px-5 py-2.5">
Confirm
</button>
<button type="button" x-on:click="open = false"
class="rounded-md border border-gray-200 bg-white px-5 py-2.5">
Cancel
</button>
</div>
</div>
</div>
</div>
</template>
</div>
</div>
Content below
/* No context defined. */