Modal Help - AlphineJS HTML & PHP

superdev ・

May 13th, 2022 05:33 PM

Can’t seem to figure out modals. Checked tutorials and can’t seem to find anything here for the language I am attempting to use. Using HTML & PHP. Modal is for the landing page.

Thanks in advance

bobbyiliev ・

May 15th, 2022 08:58 AM

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/[email protected]^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

superdev ・

May 15th, 2022 09:01 AM

ill try that out and see if it works. Thanks!

Report
1
bobbyiliev ・

May 15th, 2022 09:24 AM

No problem! Let me know how it goes!

superdev ・

May 15th, 2022 09:50 AM

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
bobbyiliev ・

May 15th, 2022 12:33 PM

Awsome! Happy to hear that you’ve got it all working.