Modal Help - AlphineJS HTML & PHP
Solved
Hi there,
Can you share the code snippet that you are trying to use?
If you don't have one, you could give this one a try:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Alpine.js Example - Modal</title>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
<style>
[x-cloak] {
display: none;
}
.duration-300 {
transition-duration: 300ms;
}
.ease-in {
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-out {
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.scale-90 {
transform: scale(.9);
}
.scale-100 {
transform: scale(1);
}
</style>
</head>
<body class="mx-auto w-full bg-gray-100 flex items-center justify-center h-screen" x-data="{ 'showModal': false }" @keydown.escape="showModal = false" x-cloak>
<section class="flex flex-wrap p-4 h-full items-center">
<button type="button" class="bg-transparent border border-gray-500 hover:border-indigo-500 text-gray-500 hover:text-indigo-500 font-bold py-2 px-4 rounded-full" @click="showModal = true">Open modal</button>
<!--Overlay-->
<div class="overflow-auto" style="background-color: rgba(0,0,0,0.5)" x-show="showModal" :class="{ 'absolute inset-0 z-10 flex items-center justify-center': showModal }">
<!--Dialog-->
<div class="bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg py-4 text-left px-6" x-show="showModal" @click.away="showModal = false" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="ease-in duration-300" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90">
<!--Title-->
<div class="flex justify-between items-center pb-3">
<p class="text-2xl font-bold">Simple Modal!</p>
<div class="cursor-pointer z-50" @click="showModal = false">
<svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
</svg>
</div>
</div>
<!-- content -->
<p>Modal content can go here</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<!--Footer-->
<div class="flex justify-end pt-2">
<button class="px-4 bg-transparent p-3 rounded-lg text-indigo-500 hover:bg-gray-100 hover:text-indigo-400 mr-2" @click="alert('Additional Action');">Action</button>
<button class="modal-close px-4 bg-indigo-500 p-3 rounded-lg text-white hover:bg-indigo-400" @click="showModal = false">Close</button>
</div>
</div>
<!--/Dialog -->
</div><!-- /Overlay -->
</section>
</body>
Source: https://alpinetoolbox.com/examples/modal
Best,
Bobby
No problem! Let me know how it goes!
ill try that out and see if it works. Thanks!
I got it figured out.
Did this:
<div x-data="{ open: false }">
<div class="flex justify-center items-center relative">
Click to test: <button class="bg-blue-900 text-white rounded px-4 py-2 ml-3" @click="open = !open">Toggle Modal</button>
</div>
<div x-show="open" x-cloak="" class="fixed inset-0 z-50 flex justify-center items-center">
<div class="bg-white rounded shadow-lg p-8 relative">
<button class="absolute right-0 top-0 px-3 py-1" @click="open = false">x</button>
I'm a modal
</div>
</div>
</div>
Report
1
1
Awsome! Happy to hear that you’ve got it all working.